banner滑动juqery特效带自动切换

最新推荐文章于 2021-06-23 11:41:37 发布

weixin_34315189

最新推荐文章于 2021-06-23 11:41:37 发布

阅读量299

点赞数

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/561940

本文提供了一套简单的网页Banner滑动切换实现方案，包括JS代码、HTML结构与CSS样式，并介绍了如何添加前后导航按钮。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

突然在网络上找不到合适的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/images/u4618.jpg" alt=""></a></dt>   

        </dl>

        <dl>

            <dt><a href="#"><img src="../Content/images/u4620.jpg" alt=""></a></dt>       

        </dl>

        <dl>

            <dt><a href="#"><img src="../Content/images/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");

    //对应小圆点样式改变

    })

本文转自  小旭依然  51CTO博客，原文链接:http://blog.51cto.com/xuyran/1878370

banner滑动juqery特效 带自动切换

banner滑动juqery特效带自动切换