JS图片无缝滚动(绝对可以用)
现在又想做一个无缝滚动了，所以在网上找啊找，好多都是相同的，而且调试复杂，好多都不能动，也懒得去细看，终于让我发现了这个，希望能帮到别人：
原样复制后，几乎不需要改动就能用了！有问题大家讨论
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>滚动代码</title>
<style>
*{ margin:0; padding:0;}
ul,li{ list-style:none;}
.left_1{ width:500px; height:100px; margin:0 auto;}
.left_1 ul{}
.left_1 li{ float:left; width:120px; height:100px; line-height:100px; text-align:center;}
.left_1 p{ width:50px; he
100px; line-height:100px;}
.left_1_i div{ width:100px; height:100px; line-height:100px; border:1px solid #e5e5e5; margin-left:10px; padding-left:10px;}
</style>
<script language=”javascript”>
function scrollSZ(con_id,speed,direct){
var con,items,heightHalf,heightAll;
var timer;
speed = parseInt(speed);//获取设置的速度参数
con = document.getElementById(con_id);
con.style.overflow = “hidden”;
if(direct == “top”){
direct = “top”;
}else if(direct == “bottom”){
direct = “bottom”;
}else{
direct = “top”;
}
con.innerHTML +=con.innerHTML;
con.innerHTML +=con.innerHTML;
items = getChildNodes(con);
if(items.length < 1){
return;
}
heightAll = 0;
for(var i=0;i<items.length;i++){
var numTop,numBottom;
if (!!window.ActiveXObject){
numTop = items[i].currentStyle[“marginTop”];
numBottom = items[i].currentStyle[“marginBottom”];
}else{
numTop = document.defaultView.getComputedStyle(items[i],null)[“marginTop”];
numBottom = document.defaultView.getComputedStyle(items[i],null)[“marginBottom”];
}
numTop = parseInt(numTop);
numBottom = parseInt(numBottom);
numTop += numBottom;
if(numTop >0){
heightAll += numTop;
}
heightAll += items[i].offsetHeight;
}
heightHalf = heightAll/2;
if(direct == “bottom”){
con.scrollTop = heightHalf;
timer = setInterval(_scrollBottom,speed);
}else if(direct == “top”){
timer = setInterval(_scrollTop,speed);
}
con.onmouseover = function(){
if(timer){
clearInterval(timer);
timer = null;
}
};
con.onmouseout = function(){
if(!timer){
if(direct == “top”){
timer = setInterval(_scrollTop,speed);
}else if(direct == “bottom”){
timer = setInterval(_scrollBottom,speed);
}
}
};
function _scrollTop(){
if(con.scrollTop < heightHalf){
con.scrollTop += 2;
}else{
con.scrollTop = 0;
}
}
function _scrollBottom(){
if(con.scrollTop > 0){
con.scrollTop -= 2;
}else{
con.scrollTop = heightHalf;
}
}
}
function scrollSP(con_id,speed,direct){
var con,innerCon,timer,items,widthAll,widthHalf;
speed = parseInt(speed);
con = document.getElementById(con_id);
con.style.overflow = “hidden”;
items = getChildNodes(con);
if(items.length == 1){
innerCon = items[0];
}else{
return;
}
innerCon.innerHTML += innerCon.innerHTML;
innerCon.innerHTML += innerCon.innerHTML;
items = getChildNodes(innerCon);
if(items.length<1){
return;
}
widthAll = 0;
for(var i=0;i<items.length;i++){
}
for(var i=0;i<items.length;i++){
var numLeft,numRight;
if (!!window.ActiveXObject){
items[i].style.styleFloat = “left”;
numLeft = items[i].currentStyle[“marginLeft”];
numRight = items[i].currentStyle[“marginRight”];
}else{
items[i].style.cssFloat = “left”;
numLeft = document.defaultView.getComputedStyle(items[i],null)[“marginLeft”];
numRight = document.defaultView.getComputedStyle(items[i],null)[“marginRight”];
}
numLeft = parseInt(numLeft);
numRight = parseInt(numRight);
numLeft += numRight;
if(numLeft>0){
widthAll += numLeft;
}
widthAll += items[i].offsetWidth;
}
widthHalf = widthAll/2;
innerCon.style.width = widthAll+”px”;
if(direct == “left”){
direct = “left”;
}else if(direct == “right”){
direct = “right”;
}else{
direct = “left”
}
if(direct == “left”){
timer = setInterval(_scrollLeft,speed);
}else if(direct == “right”){
con.scrollLeft = widthHalf;
timer = setInterval(_scrollRight,speed);
}
con.onmouseover = function(){
if(timer){
clearInterval(timer);
timer = null;
}
}
con.onmouseout = function(){
if(direct == “left”){
timer = setInterval(_scrollLeft,speed);
}else{
timer = setInterval(_scrollRight,speed);
}
}
function _scrollLeft(){
if(con.scrollLeft<widthHalf){
con.scrollLeft += 2;
}else{
con.scrollLeft = 0;
}
}
function _scrollRight(){
if(con.scrollLeft>0){
con.scrollLeft -= 2;
}else{
con.scrollLeft = widthHalf;
}
}
}
function getChildNodes(obj){//获取元素子节点
var childList,list;
childList = new Array();
list = obj.childNodes;
for(var i=0;i<list.length;i++){
if(list[i].nodeType == 1)
childList[childList.length] = list[i];
}
return childList;
}
</script>
</head>
<body>
<div id=”left_1″>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<div>b</div>
<div>a</div>
</div>
</div>
<script language=”javascript”>scrollSP(“left_1″,10,”right”);</script>
</body>
</html>
转载请注明：JS图片无缝滚动(绝对可以用) - 前端开发
为您推荐
您可能还会对这些文章感兴趣
2014-11-19jquery图片滚动滑块插件Devrama Slider解析
官网网站demo演示 Devrama Slider主要特色 Devrama Slider 是个图像滑块，带有许多非常有趣的特性。它不仅支持图像还支持 HTML 内容。 响应式 方便 CSS3 转换 转换效果 进度条 ...
2012-08-1423款jQuery图片滚动相册特效插件
jQuery是一个非常优秀的 JavaScript 框架，使用简单灵活，同时还有许多成熟的插件可供选择。其中，jQuery 最令人印象深刻的应用之一就是对图片的处理，它可以让帮助你在你的项目中...
2016-12-21五个典型的 JavaScript 面试题
在IT界，需要大量的 JavaScript 开发者。如果你的能力能够胜任这一角色，那么你将获得许多更换工作和提高薪水的机会。但是在你被公司录取之前，你需要展现你的技术实力，以便通过...
2016-12-20JavaScript 字符串常用操作
JavaScript 字符串用于存储和处理文本。因此在编写 JS 代码之时她总如影随形，在你处理用户的输入数据的时候，在读取或设置 DOM 对象的属性时，在操作 Cookie 时，在转换各种不同 ...
2016-12-15js验证固定电话手机号码
规则的国内固定电话和传真的格式基本都是带有0的区号+连接符“-”＋电话号码，另外还有可能有分机号，区号有3位、4位，电话号码有7位和8位的；其它格式的有前面不带0的，或者不带连...
2016-12-15js去除重复并统计数量方法
首先点击按钮触发事件，然后用class选择器，迭代要获取的文本（这里最好用text()方法）加入到Array()集合里。然后创建一个map{},遍历Array()集合，取一个值作为map的key,然后判断...
2016-12-1510分钟让你的javascript登峰造极
javascipt被称作前端的灵魂，没法灵活运用它，你的前端就只是一具行死走肉。大多初学者能顺利度过div+css，然后倒在了js怀抱，即时跨过了这一关，也只是会用，其底层原理一概不知...
2016-12-15JavaScript禁止a标签超链接点击
JavaScript禁止a超链点击，我们都知道让a超链接点击后不跳转,可以用href = “#”，但是这个#就会锚点到页面最上边，点击链接后不跳转可以在它后面加JavaScript点击事件 ...
2016-07-01利用新浪api接口查询判断IP和地区信息
大家平时经常能看到分类信息网站中能自动判断用户所在的地理位置，以前有一种很笨的方法就是把各地的数据段输入数据库或者一个文档中，通过查询判断用户的地理位置。当然这里的ip...
2015-10-26js根据IP地址判断城市
var province = '' ; var city = '' ; jQuery.getScript("http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js",function(){ province = remote_i...
猜你喜欢
大家正在看
- js cookies控制网站节日背景显示隐藏
- 系列集合-页面重构中的模块化设计-CSS森林 【极力推荐看完】
- 手机端网页设计尺寸,手机端网页设计图片尺寸
- 一行代码解决各种IE兼容问题,IE6,IE7,IE8,IE9,IE10
- 2011年最佳jQuery插件
- linux vps安装kloxo配置全部过程
- 如何用一个标题引爆微信流量
- css3实现渐变的iPhone滑动解锁效果
- css3几何图形、多边图形shape研究
- PNG图片优化压缩
- 优酷LOGO换了，新造型该给打几分？
- iPhone6屏幕揭秘
- wordpress不修改数据库过滤替换文章内容
- jquery中文日历插件date_input.pack实例