最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
原生js实现轮播图
时间:2017-05-07 编辑:简简单单 来源:一聚教程网
CSS:
代码如下 | 复制代码 |
* { margin:0; padding:0; list-style:none; text-decoration:none; font-family:"Microsoft YaHei",Arial,Helvetica,sans-serifsans-serif; }
body { background:#eee; }
#Bigbox { width:720px; height:420px; border:1pxsolid#333; margin:60pxauto; }
#Box { width:700px; height:400px; position:relative; overflow:hidden; top:10px; left:10px; }
#Ul { height:400px; position:absolute; top:0; left:0; }
#Ul li { width:700px; height:400px; float:left; }
#Left { width:60px; height:50px; border-radius:30%; background: rgba(96,96,96, .5); position:absolute; top:50%; left:0; margin-top:-25px; color:#fff; line-height:50px; text-align:center; cursor:pointer; font-size:20px; display:none; }
#Right { width:60px; height:50px; border-radius:30%; background: rgba(96,96,96, .5); position:absolute; top:50%; right:0; margin-top:-25px; color:#fff; line-height:50px; text-align:center; cursor:pointer; font-size:20px; display:none; } |
html:
代码如下 | 复制代码 |
1
2
3
4
5
6
7
8
9
10
|
js:
代码如下 | 复制代码 |
window.onload =function() { varn = 0; vartimer =null; vartimer1 =null; vartimer2 =null; vartimer3 =null; varoDiv = document.getElementById('Box') varoUl = document.getElementById('Ul') varoLi = oUl.getElementsByTagName('li') //获取div宽度 varoDivWidth = getStyle(oDiv,'width').split('px')[0]//复制oUl的innerHTML oUl.innerHTML += oUl.innerHTML //设置ul宽度 oUl.style.width = oLi.length * oDivWidth +'px' //获取ul宽度 varoUlWidth = getStyle(oUl,'width').split('px')[0]//封装获取非行间样式函数 functiongetStyle(obj, sName) { if(obj.currentStyle) { returnobj.currentStyle[sName]; }else{ returngetComputedStyle(obj,false)[sName]; } } //执行函数 clearInterval(timer3) timer3 = setInterval(function() { Run() }, 2000) //封装运动函数 functionRun() { clearInterval(timer) timer = setInterval(function() { n -= 20; oUl.style.left = n +'px' if(n % oDivWidth == 0) { clearInterval(timer3) clearInterval(timer) clearInterval(timer1) timer1 = setTimeout(function() { Run() }, 2000) } if(n <= -oUlWidth / 2) { oUl.style.left = 0; n = 0; clearInterval(timer3) clearInterval(timer) clearInterval(timer1) timer1 = setTimeout(function() { Run() }, 2000) } }, 30) }
//鼠标移入停止滚动 oDiv.onmouseover =function() { Left.style.display ='block' Right.style.display ='block' clearInterval(timer3) clearInterval(timer2) timer2 = setInterval(function() { if(n % oDivWidth == 0) { clearInterval(timer) clearInterval(timer1) } }, 30)
}
//鼠标移出继续执行 oDiv.onmouseout =function() { Left.style.display ='none' Right.style.display ='none' clearInterval(timer3) clearInterval(timer2) clearInterval(timer1) timer1 = setTimeout(function() { Run() }, 2000) }
//向左 Left.onclick =function() { //清除所有定时器 clearInterval(timer) clearInterval(timer1) clearInterval(timer2) clearInterval(timer3) timer = setInterval(function() { n -= 50; oUl.style.left = n +'px' if(n % oDivWidth == 0) { clearInterval(timer) } if(n <= -oUlWidth / 2) { oUl.style.left = 0; n = 0; } }, 30) }
//向右 Right.onclick =function() { clearInterval(timer) clearInterval(timer1) clearInterval(timer2) clearInterval(timer3) if(n == 0) { n = -oUlWidth / 2 } clearInterval(timer) timer = setInterval(function() { n += 50; oUl.style.left = n +'px' if(n % oDivWidth == 0) { clearInterval(timer) }
}, 30) } } |
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28