MENU

原生jq实现轮播图

• March 27, 2019 • Read: 1269 • Web Program

全部手写的哟

Html部分

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="jquery3.min.js"></script>
    <title>jq图片轮播</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            text-decoration: none;
        }


        #container {
            width: 100%;
            border: 0px solid #eee;
            position: relative;
            overflow: hidden;
            margin: 50px auto;
            cursor: pointer;
            height: 500px;
        }

        #list {
            position: absolute;
            width: 100%;
        }

        #list img {
            float: left;
            width: 100%;
            position: absolute;
            /* transition: all 1s; */
        }

        #buttons {
            position: absolute;
            z-index: 2;
            bottom: 10px;
            left: 50%;
            margin-left: -34px;
        }

        #buttons span {
            display: block;
            width: 20px;
            height: 20px;
            background-color: #333;
            border: 1px solid #fff;
            margin-right: 5px;
            border-radius: 50%;
            float: left;
            cursor: pointer;
            transition: 0.3s;
        }

        #buttons .on {
            background: orangered;
        }

        .arrow {
            display: block;
            width: 40px;
            height: 40px;
            font-size: 36px;
            text-align: center;
            position: absolute;
            color: #fff;
            z-index: 3;
            top: 50%;
            margin-top: -20px;
            line-height: 40px;
        }

        #prev {
            left: 20px;
        }

        #next {
            right: 20px;
        }

        a:hover {
            background-color: #23222259;
        }
    </style>
</head>

<body>
    <div id="container">
        <div id="list" style="left:0px">
            <img src="https://ww2.sinaimg.cn/large/005BYqpgly1g162eej3sej30y20cstdu.jpg" alt="1" style="z-index: 1;" />
            <img src="https://ww2.sinaimg.cn/large/005BYqpgly1g162ev1d8xj30y20cs0xy.jpg" alt="2" />
            <img src="https://ww2.sinaimg.cn/large/005BYqpgly1g162f7080cj30y20cs79p.jpg" alt="3" />
            <img src="https://ww2.sinaimg.cn/large/005BYqpgly1g162fk1v8bj30y20cswij.jpg" alt="4"  />
        </div>
        <div id="buttons">
            <span style="background: orangered;" index="0" ;></span>
            <span index="1" ;></span>
            <span index="2" ;></span>
            <span index="3" ;></span>
        </div>
        <a href="#" id="prev" class="arrow">&lt;</a>
        <a href="#" id="next" class="arrow">&gt;</a>
    </div>
</body>
</html>

JS部分

<script>
        var spans = $('span');//获取所有span(按钮)
        var imgs = $('img');//获取所有的img标签
        var jsq = null;//计时器初始值定义为null
        var i = 0;//全局变量i初始值0(img的下标)
        function superauto() {//函数:JQ链式写法实现按钮变色和变化图片
            $('img').eq(i).fadeIn(1000).siblings().fadeOut(1000);//siblings():所有兄弟标签fadeOut(500):反向兄弟标签透明度在500毫秒从1变为0
            $("span").eq(i).css({ background: "orangered" }).siblings().css({ background: "" });//eq:当时操作的下标
        }
        function svip() {//定义自动播放函数
            i++;//i每次加1
            if (i >= imgs.length) {//判断如果i大于所有img标签长度后
                i = 0;//使i归0
            }
            superauto();//最后执行变背景和变图片的函数
        }
        $("#next").click(function () {//下一张按钮
            svip();//直接执行自动播放函数
        });
        $("#prev").click(function () {//上一张按钮及原点背景变色
           if (i <= 0) {//如果i=0时
                i = imgs.length;//使i等于img标签长度
            }
            i--;//i自减
            superauto();//最后执行变背景和变图片的函数
        });
        $('span').hover(function () {//定义鼠标放进原点函数
            i=$(this).index();//使鼠标覆盖的下标等于i
            superauto();
        },function(){//定义鼠标移出时的函数
            i=$(this).index();//使用最后一次小圆点的下标值 使他等于i 实现图片从当前位置出发继续播放下去
        })
        //计时器
        jsq = setInterval(svip, 2000);//让定时器赋值为jsq
        $('#container').hover(function () {//定义鼠标进去主题的函数

            clearInterval(jsq);//暂停图片轮播
        }, function () {//鼠标离开时

            jsq = setInterval(svip, 2000);//继续播放!

        })
</script>

在线测试

源码下载

Jquery三级联动

Last Modified: March 29, 2019