jq 方法简易轮播图

css + body部分注意img父级的设置

<style>
            * {
                margin: 0;
                padding: 0;
            }

            ul li {
                list-style: none;
            }

            #box {
                height: 260px;
                width: 500px;
                margin: 50px auto;
                position: relative;
                overflow: hidden;
            }
            /* 这里img的父级xian不设置宽度 */
            /* 下面根据图片的数量 */
            #box div {
                position: absolute;
                top: 0;
                left: 0;
            }

            #box div img {
                width: 500px;
                height: 260px;
                float: left;
            }

            .but .right {
                height: 50px;
                width: 50px;
                position: absolute;
                left: 450px;
                top: 105px;
            }

            .but .left {
                height: 50px;
                width: 50px;
                position: absolute;
                top: 105px;
                left: 0;
            }

            .dian {
                position: absolute;
                bottom: 5px;
                left: 50%;
                transform: translateX(-50%);
            }

            .dian li {
                float: left;
                height: 10px;
                width: 10px;
                border-radius: 5px;
                background-color: #E84A7E;
                margin: 0 5px;
            }

            .dian .act {
                background-color: papayawhip;
            }
        </style>

　　　　</div>

</body>

js部分

<script src="jquery.js"></script>
    <script>
        // 1选择元素 
        var $box = $("#box1")
        var $img = $box.find("img")
        var $right = $(".right")
        var $left = $(".left")
        var $dian = $(".dian")
        // 2获取图片的个数 
        var num = $img.length;
        // 3给img的父级设置宽度  数量*1个的宽度
        $box.width($img.length * $img.width())
        console.log($img.width())
        // $box[0].style.width = $img.length * $img.width() +"px"
        // console.log($box.width())
        // 设置图片起始索引
        var index = 0

        //4点击右按钮是
        //因为是让img的直接父级滚动
        //如果不在最后加上第一张的话,
        //当动画走到最后一张时再点击的时候应该是到第一张,
        //但是这个时候第一张会从右边出来,所以,
        //在最后添加一个img
        // 改变index的值为1
        $right.on("click", function() {
            if (index === num - 1) {
                //5不加不在最后加上第一张的为0
                // index = 0
                index = 1
                // 6当它走到最后的时候,再点击还是会从右边出来
                // 所以强行把box1这个盒子回到最开始的位置
                $box[0].style.left = 0 + "px"
            } else {
                index++
            }
            // console.log(index)
            $box.stop().animate({
                // 7每点击一次走的长度 当前这个图片*一个图片的宽度
                left: -index * $img.width()
            })
            //10将class属性设置给当前图片的索引,图片走到谁身上,第几个小点点就变色
            $dian.find("li").eq(index).addClass("act").siblings().removeClass()
        })


        $left.on("click", function() {
            if (index === 0) {
                //点击左按钮的时候,设置索引   和 box1走到最后 之后的位置
                index = $img.length - 2
                $box[0].style.left = -($img.length) * $img.width() + "px"
                // console.log($box[0].style.left)
            } else {
                index--
            }
            // console.log(index)
            $box.stop().animate({
                left: -index * $img.width()
            })
            //10将class属性设置给当前图片的索引,图片走到谁身上,第几个小点点就变色
            $dian.find("li").eq(index).addClass("act").siblings().removeClass()
        })



        var str = ""
        // 8循环遍历num,给ul加li
        for (var i = 0; i < num; i++) {
            str += `<li></li>`
        }
        $dian.html(str)
        // 9并且给第一张加上class属性
        $dian.find("li").eq(0).addClass("act")

        //11 开启计时器,执行点击事件
        //相当于每隔一定的时间去点击了一次左右按钮
        // 注意 用到click的方法
        var time;
        time = setInterval(function() {
            $right.click()
        }, 3000)
        //12 hover方法
        //鼠标进入 停止自动轮播
        //鼠标移出 开启
        $box.hover(function() {
            clearInterval(time)
        }, function() {
            time = setInterval(function() {
                $right.click()

            }, 3000)
        })

        //13 最难理解的一步  click根据需要可以改成mouseenter
        //鼠标点击的是谁 获取当前的索引值 给它保存到actindex上 并设置给index
        $dian.find("li").on("click", function() {
            var actindex = $(this).index()
            index = actindex
            //并让当前的点击的开启
            $box.stop().animate({
                left: -index * $img.width()
            })
            //点击的这个小点点加上属性
            $dian.find("li").eq(index).addClass("act").siblings().removeClass()
        })
    </script>

部分

jq 方法 简易轮播图

jq 方法简易轮播图