超简单前端JS经典轮播图包括鼠标移入暂停。

朽唐

已于 2022-11-12 22:55:49 修改

阅读量778

点赞数 1

文章标签： javascript 前端开发语言

于 2022-11-12 22:41:28 首次发布

本文链接：https://blog.csdn.net/weixin_51938119/article/details/127826592

版权

废话不多说直接上代码

 <!-- 轮播图开始 -->
    <div id="banner">
        <ul class="imgs">
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
        </ul>
        <div style="position: relative;">
            <ul class="anniu">
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div style="position: relative;">
            <div class="leftt"><button class="iconfont">&#xe600;</button></div>
            <div class="right"><button class="iconfont">&#xe630;</button></div>
        </div>
    </div>
    <!-- 轮播图结束 -->

CSS部分

#banner {
    max-width: 1436px;
    min-width: 1436px;
    overflow: hidden;
    margin: 30px auto;
    position: relative;
    height: 600px;
    
}

.imgs {
    width: 6600px;
    margin-top: 20px;
}

.imgs li {
    float: left;
}

.imgs li img {
    width: 1436px;
    height: 600px;
    
}

/* 小点点 */
.anniu li {
    width: 12px;
    height: 12px;
    float: left;
    margin-right: 8px;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #fff;
}

.anniu {
    position: absolute;
    left: 47%;
    top: 530px;
}

.active {
    background: orange;
}
.leftt{
    position: absolute;
    top:225px;
    left: 20px;
}
.right{
    position: absolute;
    top: 225px;
    left: 1316px;
}
.leftt button,.right button{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    opacity: 0.2;
    border: none;
   
}

JS部分本人使用的是文件引入方式

$(function () {
    var a = 2000;
    var b = 0;
    var c = $(".imgs li").length;
    var PD = true;
    var y;
    function K(){
        b++;
        if (b >= c) {
            b = 0;
            $(".imgs").animate({ "margin-right": d }, 200);//过渡时间
        }
        var d = b * (-1436) + "px";
        $(".imgs").animate({ "margin-left": d }, 200);//过渡时间
        dian()
    }
    lunbo()
    function lunbo(){

    y= setInterval(function () {
        if (PD) {
            PD = false; 
            K()
            PD = true;
        }
           
    }, a);
}
    function dian() {
        if (b >= c) {
            b = 0;
        }
        $(".anniu li").eq(b).addClass("active").siblings("li").removeClass("active");
    }
    $(".anniu li").click(function () {
        PD = false
        var num = $(this).index();
        b = num;
        if (b >= c) {
            b = 0;
        }
        dian()
        var e = b * (-1436) + "px";
        $(".imgs").animate({ "margin-left": e }, 200);

    })
    $(".leftt").click(function () {
        // PD = false
        b--;
        if (b < 0) {
            b = c - 1;
        }
        var e = b * (-1436) + "px";
        $(".imgs").animate({ "margin-left": e }, 200);
        dian();
        
    })
    $(".right").click(function () {
        // PD = false
        b++;
        if (b >= c) {
            b = 0;
        }
        var e = b * (-1436) + "px";
        $(".imgs").animate({ "margin-left": e }, 200);
        dian();
       
    })

    $("#banner").mouseover(function () {
        $(".leftt button,.right button").css("opacity", 0.8).stop();
        clearInterval(y);
       
    })
    $("#banner").mouseout(function () {
        $(".leftt button,.right button").css("opacity", 0.2).stop();
        lunbo();
     
    })
    
})