图片无缝滚动的原理和实例
2016-10-12 10:55
190 查看
无缝滚动的结构:一共两个盒子,第一个大盒子下套第二个大盒子,第二个大盒子下有4张图片,第一个大盒子宽度固定为600px,第二个大盒子宽度是400%;
原理:第一个盒子相对浮动,第二个盒子绝对浮动,让第二个盒子的left值一直变化。当left值小于等于4张图片的宽度的时候,让left值瞬间归0,用户看不到,以为是无缝滚动。
例子:
注意:如果图片有4张的话,代码里需要写6张,第5,6两张是复制的第1,2两张;
原理:第一个盒子相对浮动,第二个盒子绝对浮动,让第二个盒子的left值一直变化。当left值小于等于4张图片的宽度的时候,让left值瞬间归0,用户看不到,以为是无缝滚动。
例子:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .box{ width: 600px; height: 200px; background-color: pink; margin: 100px auto; overflow: hidden; border: 3px solid red; position: relative; } .box ul{ width: 400%; height: 200px; position: absolute; top: 0; left: 0; } .box ul li{ list-style: none; float: left; } .box ul li img{ vertical-align: middle; } </style> </head> <body> <div class="box" id="myscroll"> <ul> <li><img src="images/1.jpg" alt=""/></li> <li><img src="images/2.jpg" alt=""/></li> <li><img src="images/3.jpg" alt=""/></li> <li><img src="images/4.jpg" alt=""/></li> <li><img src="images/1.jpg" alt=""/></li> <li><img src="images/2.jpg" alt=""/></li> </ul> </div> </body> </html> <script> var myscroll = document.getElementById("myscroll"); var myscroll_ul = myscroll.children[0]; var num = 0; //控制左侧值 left var timer = null;//定时器 timer = setInterval(autoPlay,10); function autoPlay(){ num--; num<=-1200 ? num = 0 : num ; myscroll_ul.style.left=num+"px"; myscroll.onmouseover = function () { clearInterval(timer);//鼠标经过大盒子 停止定时器timer } myscroll.onmouseout = function(){ timer = setInterval(autoPlay,10); //开启定时器 名字还是叫timer } } </script>
注意:如果图片有4张的话,代码里需要写6张,第5,6两张是复制的第1,2两张;
相关文章推荐
- ASP.NET中利用DataList实现图片无缝滚动 实例分享
- jquery实例-多张图片无缝滚动实现
- 图片首尾相接无缝滚动实例代码(向左/向右)
- 图片无缝滚动代码实例
- ASP.NET中利用DataList实现图片无缝滚动 实例分享
- marquee(.net动态数据填充)图片无缝滚动
- jquery图片自动无缝滚动
- DIV的图片无缝滚动
- 图片无缝滚动
- 图片上下左右滚动实例
- 图片循环滚动代码(无缝滚动)(分别向上、下、左、右)
- 图片无缝滚动代码
- js"无缝"滚动原理(解决IE与"火狐"的差异)
- 图片无缝滚动的完美解决
- JS实现横向图片无缝滚动
- JS实现图片无缝滚动
- 无缝循环滚动图片
- 图片循环滚动代码(无缝滚动)(分别向上、下、左、右)
- [js] 图片无缝连续循环滚动(转)
- 图片无缝滚动(横向)