html banner不自动切换,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代码如下：

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");

//对应小圆点样式改变

})