轮播图（6个功能）

 1、点击数字，跳到对应页面、

2、点击按钮，左右移动

3、自动播放

4、鼠标移入停止自动播放，移出继续自动播放

5、根据图片自动添加按钮

6、根据输入的数字，跳到对应的页面

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: content-box;
        }

        .content {
            position: relative;
            width: 150px;
            height: 150px;
            margin: 100px auto;

        }

        .img {
            width: 150px;
            height: 150px;
            overflow: hidden;
        }

        .img ul {
            display: flex;
            width: 450px;


        }

        li {

            list-style: none;
        }

        img {

            width: 150px;
            height: 150px;
            border: 1px solid red;

        }

        .put {
            position: absolute;
            left: 0;
            bottom: 50%;
        }

        .put div {
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            background-color: rgb(111, 187, 223);
            border-radius: 50%;
        }

        .right {
            position: absolute;
            right: -134px;

        }

        .button {
            position: absolute;
            left: 0;
            bottom: 0;
        }

        button {

            width: 20px;
            height: 20px;
            border-radius: 50%;
        }

        .trans {
            position: absolute;
            bottom: 0;
            right: 0;
        }


        input {
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }

        .addimg {
            position: absolute;
            top: 0;
            right: 0;
        }

        .addimg input {
            width: 50px;
            height: 20px;
            line-height: 10px;
            text-align: center;
        }

        .addimg button {
            width: 30px;
            height: 30px;
            border-radius: 0;
        }
    </style>

<div class="content">
        <div class="img">
            <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>

            </ul>
        </div>
        <div class="put">
            <div class="right">&gt;</div>
            <div class="left">&lt;</div>
        </div>
        <div class="button">
            <!-- <button>1</button>
            <button>2</button>
            <button>3</button> -->
        </div>
        <div class="trans">
            <input type="text" class="inputValue" value="">
            <button class="t">确</button>
        </div>
    </div>

 

<script>
        //0、根据图片添加数字按钮
        imgarr = ["./images/1.jpg", "./images/2.jpg", "./images/3.jpg"];
        function btn() {
            for (var i = 1; i <= imgarr.length; i++) {
                document.querySelector('.button').innerHTML += `<button>${i}</button>`
            }
        }
        console.log('haha');
        btn()

        //1、点击数字，跳到对应的图片
        $(function () {
            $('.button').on("click", "button", function () {
                let btnIndex = $(this).index()
                // console.log(btnIndex);
                let trans = btnIndex * -150;
                $('img').css("transform", `translate(${trans}px)`)
            })
        })
        //2、自动播放
        //自动播放，图片一般都是往左，自动播放，图片一般都是循环的，播到最后一张，会再跳到第一张，以此类推
        //如果这个值等于最后一张图片移动的距离了，就需要把让他再从新开始，如果没有，那就每次加一个图片的大小
        //需要注意，第一张移动的是0，第二章移动的是1*图片的大小
        let timer;
        var num = 0
        function auto() {
            timer = setInterval(() => {
                if (num === -(imgarr.length - 1) * 150) {
                    num = 0
                } else {
                    num -= 150
                }
                $('img').css("transform", `translate(${num}px)`)
            }, 1000);
        }
        auto()
        //3、鼠标经过，自动播放暂停
        // 鼠标移入暂停定时器，鼠标移除继续调用自动播放那个函数
        $(".content").mouseenter(function () {
            clearInterval(timer)
        })
        $(".content").mouseleave(function () {
            auto()
        })
        //4、根据输入的数字，跳到相应的图片
        var inpval = $(".inputValue").val();
        console.log(inpval);
        function inputval(val) {
            if (val === '' && val === null) {
                console.log('请输入正确的数字');
            } else if (isNaN(val)) {
                console.log('你输入的不是一个数组 ');
            } else if (val <= imgarr.length) {
                $('img').css("transform", `translate(${(val - 1) * -150}px)`)
            } else {
                console.log(imgarr.length + '以内的数字');
            }
        }
        inputval(inpval)
        $(function () {
            $(".trans .t").click(function () {
                var inpval = $(".inputValue").val();
                console.log(inpval);
                inputval(inpval)
            })
        })
        //5、点击左右，移动图片
        //点击左，图片往右走，
        //点击右，图片往左走，
        function left() {
            if (num === 0) {
                num = -((imgarr.length - 1) * 150)
            } else {
                num += 150
            }
            $('img').css("transform", `translate(${num}px)`)
        }
        function right() {
            if (num === -(imgarr.length - 1) * 150) {
                num = 0
            } else {
                num -= 150
            }
            $('img').css("transform", `translate(${num}px)`)
        }
        $(".right").click(function () {
            right()
            console.log(num);
        })
        $(".left").click(function () {
            left()
            console.log(num);
        })
    </script>