突然在网络上找不到合适的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代码如下：

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");    //对应小圆点样式改变    })