13518219792

NEWS

网站建设资讯

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