banner滑動juqery特效 帶自動切換

突然在網絡上找不到合適的banner滑動切換代碼了……之前不找的時候一搜一大把，我有點意外，好容易找到一個，竟然在筆記本電腦上不兼容。不得已，自己手寫了一個，其實代碼也非常簡單，懂得它的原理，改淡入淡出，加上向前，向後小圖標也非常容易。

請轉載此文的朋友務必附帶原文鏈接，謝謝。

原文鏈接：http://xuyran.blog.51cto.com/11641754/1878370

js代碼如下：

//滑動切換
var page = 1;
function bannerSlide() {
    var  len = $("#bd1lfimg > div dl").length;
    if (page == len) {
        page = 1;
    } else {
        page++;
    }
    $("#bd1lfimg > div").animate({ marginLeft: "-" + 750 * (page - 1) });//對應banner滑動
    $("#bd1lfsj ul li").stop().eq(page - 1).addClass("show").siblings().removeClass("show");
    //對應小圓點樣式改變
}

$(function () {
    var changeSelf = setInterval(bannerSlide, 4000);//自動切換
    $("#bd1lfsj ul li").on("click", function () {
        var index = $(this).index();
        $(this).addClass("show").siblings().removeClass("show");
        $("#bd1lfimg > div").stop().animate({ marginLeft: "-" + 750 * index });
        page = index;
    })
})

html代碼如下：

	<!--banner滑動開始-->
<div class="sub_box">	
	<div id="p-select" class="sub_nav">	
		<div class="sub_no" id="bd1lfsj">
			<ul>
			<li class="show"></li>
			<li></li>
			<li></li>
			</ul>
		</div>
</div>
	<div id="bd1lfimg">
		<div>
		<dl class="show">
		    <dt><a href="#"><img src="../Content/p_w_picpaths/u4618.jpg" alt=""></a></dt>	
		</dl>
		<dl>
			<dt><a href="#"><img src="../Content/p_w_picpaths/u4620.jpg" alt=""></a></dt>		
		</dl>
		<dl>
			<dt><a href="#"><img src="../Content/p_w_picpaths/u4622.jpg" alt=""></a></dt>		
		</dl>						
		</div>
	        </div>
	</div>
									
<!--banner滑動結束-->

css代碼如下：

/* banner滑動 開始*/
.sub_box{
	width:750px;
	height:350px;
	position:relative;
	overflow:hidden;
}
.sub_box img{
	width:750px;
	height:350px;
}
#bd1lfimg{
	position:relative;
	width:750px;
	height:350px;
	overflow:hidden;
}
#bd1lfimg div{
	width:100000px;
}
#bd1lfimg dl{
	width:750px;
	height:350px;
	position:relative;
	overflow:hidden;
	float:left;
}
#bd1lfimg dt{
	width:750px;
	height:350px;
	position:absolute;
	left:0px;
	top:0px;
}

.sub_nav{
	width:150px;
	height:25px;
	bottom:0px;
	position:absolute;
	z-index:10;
	padding-bottom:30px;
	left:260px;
}
.sub_no{
	height:25px;
	float:right;
}
.sub_no li{
	display:block;
	width:15px;
	height:15px;
	float:left;
	margin-left:10px;
	overflow:hidden;
	line-height:25px;
	vertical-align:middle;
	text-align:center;
	background:#bcbcbc; 
	filter:alpha(Opacity=70);
	Opacity:0.7; 
	font-family:Arial;
	font-size:11px;
	cursor:pointer;
	border-radius:50%;
}
.sub_no li.show{
	background:#fbd74f;
	width:20px;
	height:20px;
	margin-top:-3px;
}
/* banner滑動 結束*/

如過要加上向前向後小圖標，原理如下：

 //點擊切換
    var page = 1;
    var len = $(".bottom-list li").length;
    $(".lightbox-next").click(function () {
        if (page == len) {
            page = 1;
        } else {
            page++;
        }
       $("#bd1lfimg > div").animate({ marginLeft: "-" + 750 * (page - 1) });//對應banner滑動
        $("#bd1lfsj ul li").stop().eq(page - 1).addClass("show").siblings().removeClass("show");
    //對應小圓點樣式改變
    })
    $(".lightbox-prev").click(function () {
        if (page == 1) {
            page = len;
        } else {
            page--;
        }
$("#bd1lfimg > div").animate({ marginLeft: "-" + 750 * (page - 1) });//對應banner滑動
    $("#bd1lfsj ul li").stop().eq(page - 1).addClass("show").siblings().removeClass("show");
    //對應小圓點樣式改變
    })