亲宝软件园·资讯

展开

jquery无缝轮播图

boylzh 人气:0

实现功能(无缝轮播图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;
       /*进行水平布局,与float功能并无差异,此处用float也是可以的*/
    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>

加载全部内容

相关教程
猜你喜欢
用户评论