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滑动开始*/ .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"); //对应小圆点样式改变 })

大橙子网站建设，新征程启航

banner滑动juqery特效带自动切换

其他资讯