轮播一:连续无缝滚动轮播
HTML:
<div id="main"> <div id="lunbo"> <ul id="lunbo_son1"> <li class="img"><img src="img/1.jpg"/></li> <li class="img"><img src="img/2.jpg"/></li> <li class="img"><img src="img/3.jpg"/></li> <li class="img"><img src="img/4.jpeg"/></li> <li class="img"><img src="img/5.jpeg"/></li> <li class="img"><img src="img/6.jpg"/></li> <li class="img"><img src="img/7.jpg"/></li> <li class="img"><img src="img/8.jpeg"/></li> </ul> <ul id="lunbo_son2"></ul> </div> </div>
CSS:
*{ margin: 0; padding: 0; box-sizing: border-box; } li{ list-style: none; } #main{ width: 800px; height: 250px; margin: 0 auto; background: palegoldenrod; margin-top: 50px; overflow: hidden; } #lunbo{ padding: 5px; width: 500%; } #lunbo_son1,#lunbo_son2{ float: left; } .img{ float: left; } .img img{ width: 160px; height: 240px; }
JavaScript:
window.onload = function(){ var d1 = document.getElementById("main"); var u1 = document.getElementById("lunbo_son1"); var u2 = document.getElementById("lunbo_son2"); u2.innerHTML = u1.innerHTML; function go(){ if(u2.offsetWidth-d1.scrollLeft<=0){ /*offsetWidth:u2可见区域的宽;scrollLeft:d1左边被卷去的长度*/ d1.scrollLeft-=u2.offsetWidth; } else { d1.scrollLeft++; } } var run = setInterval(go,1); d1.onmouseover = function(){ /*鼠标进过清除定时器*/ window.clearInterval(run); } d1.onmouseout = function(){ /*鼠标移开继续轮播*/ run = setInterval(go,1); } }
效果:
最后直接给大家提供一个我自己写的多功能自定义插件吧,具体的使用方法可以在GitHub里看到,插件可以通过设置属性实现多种常用的轮播功能。
地址:https://github.com/BillWar/jquery_carousel