jquery 轮播

骑猪看日落 2022-05-11 05:22 135阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{margin:0;padding:0;}
            .slider{width:720px;height:480px;margin:30px auto;position: relative}
            .pics{}
            .pics .item{display: none}
            .pics .active{display: block}
            ul{list-style: none;position: absolute;bottom: 10px;left:50%; transform: translateX(-50%)}
            ul li{width:10px;height:10px;border:1px solid gray;margin-right:6px;border-radius: 50%;display: inline-block }
           ul li:hover{cursor: pointer}
            ul li.active{background:#80172c}
            .arrow{width:26px;height:26px;position: absolute;top:50%;translateY(-50%);display: block;background-size:26px 26px }
            .arrow:hover{cursor: pointer}
            .arrow-left{background-image: url("素材/img/arrow-left.png");left: 10px}
            .arrow-right{background-image: url("素材/img/arrow-right.png"); right:10px}
        </style>
    </head>
    <body>
    <div class="slider">
        <div class="pics">
            <div class="item active">
                <img src="素材/img/01.jpg" alt="">
            </div>
            <div class="item ">
                <img src="素材/img/02.jpg" alt="">
            </div>
            <div class="item ">
                <img src="素材/img/03.jpg" alt="">
            </div>
            <div class="item ">
                <img src="素材/img/04.jpg" alt="">
            </div>
            <div class="item ">
                <img src="素材/img/05.jpg" alt="">
            </div>
        </div>
        
        <ul>
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        
        <span class="arrow arrow-left"></span>
        <span class="arrow arrow-right"></span>
    </div>
    <script src='lib/jquery.js'></script>
    <script>
       var t=setInterval(autoChange,1000);
       var index=0;
        function autoChange() {
            index++
            if (index==5){
                index=0
            }
            $('.item').eq(index).addClass('active').siblings().removeClass('active')
            $('li').eq(index).addClass('active').siblings().removeClass('active')
        }
        //向右箭头
        $('.arrow-right').click(function () {
            autoChange()
        })
        //向左箭头
       $('.arrow-left').click(function () {
           index--
           if (index==-1){
               index=5
           }
           $('.item').eq(index).addClass('active').siblings().removeClass('active')
           $('li').eq(index).addClass('active').siblings().removeClass('active')
       })
       //点击圆圈
       $('li').click(function () {
           $('.item').eq($(this).index()).addClass('active').siblings().removeClass('active')
           $('li').eq($(this).index()).addClass('active').siblings().removeClass('active')
           index=$(this).index()
       })
        //悬停
        $('.slider').hover(function over() {
            clearInterval(t)
        },function out() {
            t=setInterval(autoChange,1000)
        })
    </script>
    </body>
    </html>