JQuery实现滑动banner轮番图

轮番图常用的图片信息展示效果，也是每一个初级前端人员需要学习的效果。

实现滑动的原理是:控制同级元素的整体位置，再通过jquery的动作animate(),缓慢的实现这一过程。则就会显现滑动效果。下面是菜鸟的代码演示。

代码的最后方有免费的源文件可以下载，供和我一样的初学者学习和交流。同时也希望大牛提出更好的方法和建议。

html:

<div id="banner">
			<ul>

				<li>
					<h2><a href="javascript:"><img src="images/1.jpg"></a></h2>
					<div class="Down">
						<div class="left"></div>
						<div class="up"><a href="javascript:">AAAAAAA</a></div>
						<div class="p"><a href="javacript:">1234556778</a></div>
					</div>
				</li>

				<li>
					<h2><a href="javascript:"><img src="images/2.jpg"></a></h2>
					<div class="Down">
						<div class="left"></div>
						<div class="up"><a href="javascript:">BBBBBBBBBB</a></div>
						<div class="p"><a href="javacript:">BBBBBBBBBBB</a></div>
					</div>
				</li>
				
				<li>
					<h2><a href="javascript:"><img src="images/3.jpg"></a></h2>
					<div class="Down">
						<div class="left"></div>
						<div class="up"><a href="javascript:">AAAAAAA</a></div>
						<div class="p"><a href="javacript:">1234556778</a></div>
					</div>
				</li>

				<li>
					<h2><a href="javascript:"><img src="images/4.jpg"></a></h2>
					<div class="Down">
						<div class="left"></div>
						<div class="up"><a href="javascript:">AAAAAAA</a></div>
						<div class="p"><a href="javacript:">1234556778</a></div>
					</div>
				</li>

				<li>
					<h2><a href="javascript:"><img src="images/5.jpg"></a></h2>
					<div class="Down">
						<div class="left"></div>
						<div class="up"><a href="javascript:">AAAAAAA</a></div>
						<div class="p"><a href="javacript:">1234556778</a></div>
					</div>
				</li>

css样式

body {
	padding: 0;
	margin:0;
}
img{
	border: 0;
}
a{
	color: #000;
	text-decoration: none;
}
/*banner容器*/
#banner{
	width: 800px;
	height: 500px;
	position: relative;
	margin: 0 auto;
	overflow: hidden;
}
/*banner分容器ul*/
#banner ul{
	margin: 0;
	padding: 0;
	position: absolute;
}
#banner ul li{
	width: 800px;
	height: 500px;
	float: left;
	position: relative;
	overflow: hidden;
	background:#000;
} 
#banner ul li h2{
	margin: 0;
	padding: 0;
}
/*banner中容器中，上一个，下一个，按钮*/
#banner .PreNext{
	width: 45px;
	height: 100px;
	position: absolute;
	top: 150px;
	background: url('../images/LR.png')no-repeat 0 0;
	cursor: pointer;
}
#banner .Pre{
	left: 0;
}
#banner .Next{
	right: 0;
	background-position:right top;
}
/*下方的一百数字按钮*/
#banner .But{
	width: auto;
	height: 15px;
	position: absolute;
	right: 20px;
	bottom: 60px;
}
#banner .But span{
	width: 50px;
	height: 15px;
	float: left;
	margin-right: 10px;
	background: #000;
	cursor: pointer;
	background: #fff;
}

/*容器下方的文字区域容器*/
#banner ul li .Down{
	width: 800px;
	height: 100px;
	position: absolute;
	bottom: 0;
	background:url("../images/Dwbg.png");


}
/*小字体钱的图标部分*/
#banner ul li .Down .left{
	width: 80px;
	height: 80px;
	position:absolute;
	float: left;
	margin: 10px ;
	background: red;
}
/*标题大字体部分*/
#banner ul li .Down .up{
	position: absolute;
	font-size: 25px;
	font-weight: bold;
	left: 100px;
	top: 10px;
}
/*标题下的小字体*/
#banner ul li .Down .p{
	position: absolute;
	left: 100px;
	top: 50px;
	font-size: 16px;
	font-weight: bold;
}

JS代码：

/**
 * @author yangyu
 Time:2014/09/27
 */
$(function(){
    var Swidth=$("#banner").width();
    var len=$("#banner ul li").length;
    var index=0;
    var PicTimer;
    //定义ul的宽度，否则将断续显示
    $("#banner ul").css("width",Swidth * (len));
    //动态的添加按钮以及数字按钮
    var but="<div class='But'>";
    for(var i=0;i<len;i++){
        but +="<span></span>";
    }
    but +="</div><div class='PreNext Pre'></div><div class='PreNext Next'></div>";
    $("#banner").append(but);
    $("#banner .But").css("opacity",0.5);

    //对按钮进行透明度处理
    $("#banner .PreNext").css("opacity",0.2).hover(function(){
        $(this).stop(true,false).animate({"opacity":"0.5"},300);
    },function(){
        $(this).stop(true,false).animate({"opacity":"0.2"},300);
    });

    //上一个
    $("#banner .Pre").click(function(){
        index -=1;//index=index-1
        if(index<0){
            index=len-1;
        }
        showPic(index);
    });
    //下一个
    $("#banner .Next").click(function(){
        index +=1;
        if(index == len){
            index=0;
        }
        showPic(index);
    });

    //为下方的数字按钮添加触发方法
    $("#banner .But span").css("opacity",0.4).mouseenter(function(){
        index=$("#banner .But span").index(this);
        showPic(index);
    }).eq(0).trigger("mouseenter");

    //自动滚动方法
    $("#banner").hover(function(){
        if (index>0) {index=index-1};
        clearInterval(PicTimer);
    },function(){
        PicTimer=setInterval(function(){
            showPic(index);
            index++;
            if(index==len){index=0;}
        },3000);
    }).trigger("mouseleave");

    //图片显示方法
    function showPic(index){
        var nowLeft= -index*Swidth;
        $("#banner ul").stop(true,false).animate({"left":nowLeft},1500);
        $("#banner .But span").stop(true,false).animate({"opacity":"0.4"},300).eq(index).stop(true,false).animate({"opacity":"1"},300); 
    }
});

源代码免费下载地址：http://download.csdn.net/detail/u014703834/8099817