突然在网络上找不到合适的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");
//对应小圆点样式改变
})