jquery实现无缝轮播图

2024-04-02 19:04:59 186人浏览八月长安

摘要

本文实例为大家分享了Jquery实现无缝轮播图的具体代码，供大家参考，具体内容如下实现功能（无缝轮播图Jquery）利用移动定位进行无缝滚动，大体实现点击切换图片，每张图片对应一

本文实例为大家分享了Jquery实现无缝轮播图的具体代码，供大家参考，具体内容如下

实现功能（无缝轮播图Jquery）

利用移动定位进行无缝滚动，大体实现点击切换图片，每张图片对应一个小圆点，并且小圆点点击可以进行切换。鼠标移入停止图片轮播

强调

jquery引入本地引入，你可以在网上导入
全局由index贯穿
动画中的回调函数
flag标识，进行判断动画在执行中还是执行结束
对于图片切换到第一张还是最后一张的处理

css代码片段

* {
    padding: 0;
    margin: 0;
}
html,
body {
    height: 100%;
    overflow: hidden;
}
body{
    background: rgba(0, 0, 0, 0.2);
}
.box {
    width: 1000px;
    height: 80%;
    margin: 50px auto;
    position: relative;
    overflow: hidden;
    box-shadow: 2px 2px 15px #333333;
}

ul {
    height: 100%;
    position: absolute;
    display: flex;
}

ol,
ul,
li {
    list-style: none;
}

li {
    flex-shrink: 0;
    width: 1000px;
    height: 100%;
}

li>img {
    width: 100%;
    height: 100%;
}

button {
    width: 70px;
    height:50px;
    color: #f5f5f5;
    position: absolute;
    z-index: 3;
    top: 50%;
    transfORM: translateY(-50%);
    background: rgba(0, 0, 0, 0.2);
    border-radius:0 5px 5px 0;
    opacity: 0;
    border: none;
    cursor: pointer;
    outline: none;
    transition: all 1s;
}
.box:hover button{
    opacity: 1;
}
button:hover{
    background: rgba(0, 0, 0, 0.5);
}
.left{
    border-radius:0 5px 5px 0;
}
.right {
    border-radius:5px 0px 0px 5px;
    right: 0;
}
ol{
    width: 120px;
    display: flex;
       
    justify-content: space-between;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
}
ol li{
    border-radius: 50%;
    width: 10px;
    height: 10px;
    background-color: #fff;
    cursor: pointer;
   
}
.ac{
    width: 25px; 
    transition: width 1s;
    border-radius: 5px 5px 5px 5px;
}

html，js代码片段

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>Document</title>
    <link rel="stylesheet" href="../CSS/icon/iconfont.css" >
    <link rel="stylesheet" href="../css/carousel.css" >
    <script src="../jquery-3.4.1.min.js"></script>
</head>

<body>
    <div class="box">
        <ul>
            <li><img src="../images/1.jpg" alt=""></li>
            <li><img src="../images/2.jpg" alt=""></li>
            <li><img src="../images/3.jpg" alt=""></li>
            <li><img src="../images/4.jpg" alt=""></li>
            <li><img src="../images/5.jpeg" alt=""></li>
            <li><img src="../images/6.jpg" alt=""></li>
        </ul>
        <button class="iconfont left">&#xe60d;</button>
        <button class="iconfont right">&#xe658;</button>
        <ol>
        </ol>
    </div>
    <script>
        const box = $(".box");
        const ul = $(box).children("ul");
        const img_li = $(ul).children("li");
        const len = $(img_li).length,
            width = $(box).width();//获取box也就是li的宽
        var flag = false;        //定义一个标识，来进行判断当次动画是否已经完成
        var index = 0, lastIndex = 0;    //定义全局的index，与lastIndex，也就是一个起到下标的标识
        $(img_li).first().clone(true).appendTo($(ul))//克隆第一张图片放在ul的最后
        //生成所有的ol>li即小圆点
        for (let i = 0; i < len; i++) {
            $("<li>").addClass(i === 0 ? "ac" : "").appendTo($("ol")); //三元运算符给addClass进行填值
            //给第一个小圆点进行默认样式的设置
        }
        //小圆点点击切换图片
        $("ol li").on('click', function () {
            if (flag) return;        //标识动画，动画未完成时，取消掉点击事件
            flag = true;            //动画完成是执行点击事件的代码
            lastIndex = index;        //记录上次的点击的index的值
            index = $(this).index();        //将小圆点的小标赋值给index
            $("ol li").eq(lastIndex).removeClass("ac")
            $(this).addClass("ac");        //将样式进行toggle
            $(ul).animate({ left: -index * width }, 1000, function () //jquery的自定义动画方法
                flag = false;//回调函数将在动画结束之后将标识变为true，以便于执行下一次点击事件
            })
        })

        //点击下一张进行切换
        $(".right").on('click', function () {
            if (flag) return;        
            flag = true;        
            lastIndex = index;        
            index++;        //将index进行++，使其向下一张轮播
            if (index === len) {        //当轮播到最后一张clone的图片时
                index = 0;                //将index赋值为0，让小圆点正常执行
                $(ul).animate({ left: -len * width }, 1000, function () {//让动画继续执行到clone的那张图片
                    flag = false;        
                    $(ul).css("left", 0)    //当执行到最后一张clone的图片，执行完成时，立马瞬移到第一张图片
                })
            }
            else {
                $(ul).animate({ left: -index * width }, 1000, function () {
                    flag = false
                })
            }
            $("ol li").eq(lastIndex).removeClass("ac")    //给相应的小圆点进行样式设置
            $("ol li").eq(index).addClass("ac")

        })
        //点击上一张进行切换
        //与点击下一张进行切换思想一致
        $(".left").on('click', function () {
            if (flag) return;
            flag = true;
            lastIndex = index;
            index--;
            if (index < 0) {
                index = len - 1;
                $(ul).css("left", -len * width)
                $(ul).animate({ left: -index * width }, 1000, function () {
                    flag = false;
                })
            }
            else {
                $(ul).animate({ left: -index * width }, 1000, function () {
                    flag = false
                })
            }
            $("ol li").eq(lastIndex).removeClass("ac")        
            $("ol li").eq(index).addClass("ac")
        })
        //自动播放

        $(box[0]).hover(() => {
            clearInterval($(box)[0].timer)
        }, (function auto() {
            $(box)[0].timer = setInterval(() => { //立即执行函数，在最后返回出auto函数，让hover的leave有事件执行
                $(".right").trigger('click');
            }, 2000);
            return auto;
        }
        )())   


    </script>
</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: jquery实现无缝轮播图

本文链接: https://www.lsjlt.com/news/148294.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341