JQ实现无缝轮播/解决setinterval与页面切换问题

JQ实现无缝轮播/解决setinterval与页面切换问题

html代码:

<div class="content">
	        <ul class="box1">
	            <li>
	            	<a href="#">
		                <img src="../image/banner3.jpg" />
	            	</a>
	            </li>
	            <li>
	            	<a href="#">
		                <img src="../image/banner1.jpg" />
	            	</a>
	            </li>
	            <li>
	            	<a href="#">
	                	<img src="../image/banner2.jpg" />
	            	</a>
	            </li>
	            <li>
	            	<a href="#">
		                <img src="../image/banner4.jpg" />
	            	</a>
	            </li>
	        </ul>
	        <ul class="box2">
	            <li><div></div></li>
	            <li><div></div></li>
	            <li><div></div></li>
	            <li><div></div></li>
	        </ul>
	    </div>
复制代码

JQ代码

$(function () {
	    for(var i = 0; i < $('.box1 li').length; i++){
	        $('.box1 li').eq(i).css('left', i * $('.box1 li').width());
	    }
	    var s = 2000,
	        x = 0,
	        leftWidth = 0;
	    function box2(x) {
	        $('.box2 li').eq(x).find('div').stop(true,true).animate({
	            width: '100%'
	        }, s, function () {
	            $('.box2 li').eq(x).find('div').css('width', '0');
	            if(x == $('.box1 li').length - 1){
	            	leftWidth = 0 * $('.box1 li').width();
	            }else{
	            	leftWidth = -(x+1) * $('.box1 li').width();
	            }
	            $('.box1').css('left', leftWidth);
	        });
	    }
	box2(x);
 	timers=setInterval(function () {
      x++;
        if(x == $('.box1 li').length){
       x = 0;
        }
    	box2(x);
	}, s);
	 
	});
复制代码

解决setinterval与页面切换问题主要添加的代码：

$('.box2 li').eq(x).find('div').stop(true,true).animate({});
复制代码

转载于:https://juejin.im/post/5be3cfe85188250e8601b20b