简单的轮播图

简单的轮播图

这是一种超级简单的轮播图 可以供新手参考 主要是通过数组覆盖img的src

CSS部分

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

        a {
            text-decoration: none;
            display: block;
        }

        #imgs {
            margin: 50px auto;
            height: 300px;
            width: 600px;
            border: 1px solid orange;
            position: relative;
        }

        ul,
        li {
            list-style: none;
        }

        ul {

            position: absolute;
            bottom: 8px;
            right: 10px;
        }

        li {
            float: left;
            margin-left: 2px;
            width: 10px;
            height: 25px;
            border: 1px solid orange;
        }

        a img {
            height: 300px;
            width: 600px;
        }
        span,a{
            width: 50px;
            height: 50px;
            background-color:red;
            text-align: center;
            line-height: 50px;
        }
        span{
            position:absolute;
            top: 50%;
            transform: translateY(-50%);
        
        }
        span a:hover{
            background-color:rgba(255,255,255,0.5);
        }
        .left{
            left: 0;
        }
        .right{
            right: 0;
        }
    </style>
```css

```html
 <div id="imgs">
        <a href="javascript:;"><img src="../img/1.jpg" alt=""></a>
        <ul>
            <li style="background-color:orange"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <span class="left"><a href="javascript:;"><</a></span>
        <span class="right"><a href="javascript:;">></a></span>
    </div>

`<script src="../JS/jquery.min.js"></script>
    <script>
        let index = 0;
        const arr=["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"];
        t=setInterval(fun1,1500);
        $("#imgs").mouseenter(function() {
            clearInterval(t);
        })
        $("#imgs").mouseleave(function() {
            t=setInterval(fun1,1500);
        })
        function fun1() {
            index++;
            if (index == 5) {
                index = 0;
            }
            let path = arr[index];
            $("#imgs img").attr("src",path);
            $("ul li").eq(index).css("background","orange").siblings("li").css("background","");
        }
        $("ul li").mouseenter(function() {
            clearInterval(t);
            let index = $(this).index();
            let path = arr[index];
            $("#imgs img").attr("src",path);
            $(this).css("background","orange").siblings("li").css("background","");
        })
        $('.right').click(function() {
            fun1();
        })
        $(".left").click(function() {
            if (index==0) {
                index=5
            }
            index--;
            let path = arr[index];
            $("#imgs img").attr("src",path);
            $("ul li").eq(index).css("background","orange").siblings("li").css("background","");
        })
    </script>``