无限轮播滚动
html
<div class="slider "> <div class="box"> <ul class="scroll"> {for start="1" end="8"} <li> <a href="#"> <img src="{BLOCK_PATH}/f.jpg"> </a> </li> {/for} </ul> </div> </div>
css
#slider .scroll{ position:absolute; } #slider .box{ overflow:hidden; position:relative; height:210px; margin-bottom:30px; } #slider .box ul{ position:absolute; left:0px; top:0px; width:100%; display:flex; } #slider .box ul li{ display:block; width:210px; z-index:99999; flex-shrink:0; } #slider .box ul li a{ display:block; margin:0 10px; } #slider .box ul li img{ width:100%; }
js
$(function(){ //复制一分代码 var copy = $('#slider .scroll').html(); $('#slider .scroll').append(copy); //宽度计算 var e_w = $('#slider .scroll li').width(); var e_l = $('#slider .scroll li').length; var b_W = e_w*e_l/2*-1; //动态执行函数 var num = 0; function goLeft() { if (num <= b_W) { num = 0; } num -= 1; $("#slider .scroll").css({left:num}); } //设置滚动速度30 var timer = setInterval(goLeft, 30); //设置鼠标经过时滚动停止 $("#slider .scroll").hover(function() { clearInterval(timer); }, function() { timer = setInterval(goLeft, 30); }) });