自适应轮播关键

前言

html

        <div class=" banner2">
         	<ul class="img">
         		<li>
         			<img src="img/banner1.png" alt="" />
         		</li><li>
         			<img src="img/banner2.png" alt="" />
         		</li>
         	</ul>
        </div>

css

.banner2{
        	height: 210px;
		    /*width: 1200px;*/
		    width: 100%;
		    margin: 0 auto;
		    overflow: hidden;
		    position: relative;
		    background: #000;
        	z-index: 4;
        	margin-top: 110px;
        }
        .banner2 .img{
        	width:5000000px;
        	position:absolute;
        	left:0;
        	top:0;
        	height: 210px;
        }
        .banner2 .img li{
        	/*width: 1200px;*/
        	height: 210px;
        	float: left;
        }
        
        
        .banner2 .img li img{
            width:100%;
            height: 210px;
        }

js

$(function() {
	var winwidth = screen.width;
	$(".banner2 .img li").css("width", winwidth);
	var i = 0;
	var clone = $(".banner2 .img li").first().clone();
	$(".banner2 .img").append(clone);
	var size = $(".banner2 .img li").size();

	//            自动轮播
	var t = setInterval(moveL, 5000);
	//            对banner2的定时器操作
	$(".banner2").hover(function() {
		clearInterval(t);
	}, function() {
		t = setInterval(moveL, 5000);
	});

	//           封装的动画函数
	function moveL() {
		i++;
		if(i == size) {
			//                    i=0;
			$(".banner2 .img").css({
				left: 0
			});
			i = 1;
		}
		$(".banner2 .img").stop().animate({
			left: -i * winwidth
		}, 500);
		if(i == size - 1) {
			$(".banner2 .num li").eq(0).addClass("on").siblings().removeClass("on");
		} else {
			$(".banner2 .num li").eq(i).addClass("on").siblings().removeClass("on");
		}
	}

	function moveR() {
		i--;
		if(i == -1) {
			$(".banner2 .img").css({
				left: -(size - 1) * winwidth
			});
			i = size - 2;
		}
		$(".banner2 .img").stop().animate({
			left: -i * winwidth
		}, 500);
		$(".banner2 .num li").eq(i).addClass("on").siblings().removeClass("on");
	}

});

总结：进入页面要动态设置li的宽度，这是关键