scrollMove
基于jQuery和Bootstrap的无缝滚动图片插件
使用说明：
- 该插件基于bootstrap布局，基于jQuery进行逻辑操作。
- 如果需要实现相应式，应对bootstrap的
栅格系统、.img-responsive类熟悉。
Html/Css部分
<style> .items{ white-space: nowrap; margin-bottom: 0; overflow: hidden; } .item { display: inline-block; padding: 0; float: none; } .img-responsive{ width: 100%; } </style> <div class="wrap container"> <ul class="items list-unstyled row"> <li class="item col-xs-4"><img class="img-responsive" src="imgs/1.jpg" alt=""> </li> <li class="item col-xs-4"> <img class="img-responsive" src="imgs/2.png" alt=""> </li> <li class="item col-xs-4"><img class="img-responsive" src="imgs/3.jpg" alt=""> </li> <li class="item col-xs-4"><img class="img-responsive" src="imgs/4.png" alt=""> </li> <li class="item col-xs-4"><img class="img-responsive" src="imgs/5.jpg" alt=""> </li> <li class="item col-xs-4"><img class="img-responsive" src="imgs/6.png" alt=""> </li> </ul> </div > 核心js部分
function scrollMove( ele ,frame ,step ) { var step = step || 1; var $item = $(ele).children(); var w = 0 ; $item.each(function () { w += $(this).width(); }); $(ele).html( $(ele).html() + $(ele).html() ); var $items = $(ele); var temp = 0; function move() { if( temp > w ){ temp = 0 }else{ temp = temp+step ; } $items.scrollLeft( temp ); } setInterval(move , 1000/frame); } js配置
$(function () { scrollMove('.items',60 ,1 ); // 选择 .items 元素 ，帧数60 ， 步长1px }) 
