//$('.news-list').width($('.nw-wraper').width()); var timer = null, $newBox = $('.nw-box'),//元素盒子 $items = $newBox.children(),//子元素 $pre = $('.news-prev'), $next = $('.news-next'), oldCount = $items.size(),//子元素长度 //imgWidth = $('.news-list').eq(0).width(); imgWidth = $items.width();//单个子元素宽度 $newBox.append($items.first().clone());//克隆,方便切换 $newBox.prepend($items.last().clone()); var newCount = $newBox.children().size();//子元素新长度 $newBox.css({ 'left':0-imgWidth, 'width':imgWidth*newCount }) timer=setInterval(init,3000); // 初始化 function init(){ $pre.trigger('click'); } // hover $(".nw-wraper").hover(function(){ clearInterval(timer); },function(){ timer=setInterval(init,3000); }); $next.on('click',function(){ playNext(); }) $pre.on('click',function(){ playPre(); }) var move = 1, curidx = 0; function playNext(){ $newBox.animate({ 'left':'-='+move*imgWidth },function(){ curidx+=move; if(curidx==oldCount){ $newBox.css({ 'left':0-imgWidth }) curidx=0; } }) } function playPre(){ $newBox.animate({ 'left':'+='+move*imgWidth },function(){ curidx-=move; if(curidx==(-1)){ $newBox.css({ 'left':0-imgWidth*oldCount }) curidx = oldCount-1; } }) }
<div class="nw-wraper"> <div class="nw-box"> <!-- donghua --> <div class="news-list"> <a href="javascript:;">1</a> </div> <div class="news-list"> <a href="javascript:;">2</a> </div> <div class="news-list"> <a href="javascript:;">3</a> </div> <div class="news-list"> <a href="javascript:;">4</a> </div> </div> <!-- 分页按钮 --> <div class="news-dir"> <div class="news-mao news-prev"><span class="fa-angle-left"></span></div> <div class="news-mao news-next"><span class=" fa-angle-right"></span></div> </div> </div>
.nw-wraper .news-list{ width: 600px; height: 300px; overflow: hidden; position: relative; } .nw-box{ width: 1000%; position: absolute; left: 0; top: 0; height: 100%; } .news-list{ float: left; }