JQuery實現滑動banner輪番圖

原創

笨-大叔

2020-02-22 13:31

輪番圖常用的圖片信息展示效果，也是每一個初級前端人員需要學習的效果。

實現滑動的原理是:控制同級元素的整體位置，再通過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