JQ实现简单的自动轮播图效果

傷城~ 2023-03-02 07:38 202阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzA1Mw_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta name="author" content="Jxz">
        <title></title>
        <script src="../jquery-3.1.1.js"></script>
        <style>
            ul,li{ 
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            #box{ 
                width: 520px;
                height: 280px;
                margin: 100px auto;
                position: relative;
            }
            #box .list li{ 
                position: absolute;
                top: 0;
                left: 0;
                display: none;
            }
            #box .list li.current{ 
                display: block;
            }
            #box .count{ 
                position: absolute;
                left: 10px;
                bottom: 10px;
            }
            #box .count li{ 
                float: left;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #fa0;
                text-align: center;
                line-height: 20px;
                margin-left: 10px;
                color: #fff;
                opacity: 0.8;
                cursor: pointer;
            }
            #box .count li.current{ 
                background-color: #f60;
                opacity: 1;
            }
            #box .btn{ 
                position: absolute;
                bottom:10px;
                right: 15px;
            }
            
            #box .btn li{ 
                width: 50px;
                height: 50px;
                background-color: #ccc;
                float: right;
                margin-left: 15px;  
                opacity: 0.8;
                cursor: pointer;
                text-align: center;
                line-height: 50px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <ul class="list"> 
                <li class="current"><img src="img/01.jpg" alt=""></li>
                <li><img src="img/02.jpg" alt=""></li>
                <li><img src="img/03.jpg" alt=""></li>
                <li><img src="img/04.jpg" alt=""></li>
                <li><img src="img/05.jpg" alt=""></li>
            </ul>
            <ul class="count">
                <li class="current">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
            <ul class="btn">
                <li class="right">></li>
                <li class="left"><</li>
            </ul>
        </div>
    </body>
    </html>
    <script>
        
        // var aLi=$('.list li');
        // var aNum=$('.count li');
        // 记录当前显示的图片的索引
        var current=0;
        // 保存定时器
        var timer=null;
        timer=setInterval(autoPlay,1000)
        // 自动播放
        function autoPlay(){ 
            current<$('.count li').length-1?current++:current=0;
            show()
        }
        function show(){ 
            // aLi.hide()
            $('.list li').hide()
            .eq(current).show();
            // aNum.removeClass()
            // .eq(current).addClass('current')
            $('.count li').eq(current).toggleClass('current').siblings().removeClass('current');     
        }
        // 手动
        $('.count li').mouseenter(function(){ 
            current=$(this).index()
            show()
        })
        // 按钮控制选图
        $('#box .left').click(function(){ 
            current>0?current--:current=4;
            show()
        })
        $('#box .right').click(function(){ 
            current<$('.count li').length-1?current++:current=0;
            show()
        })
        // 鼠标进图自动暂停
        $('#box').hover(function(){ 
            clearInterval(timer);
        },function(){ 
            timer = setInterval(autoPlay,1000);
        })
    
    
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk3NzA1Mw_size_16_color_FFFFFF_t_70]: /images/20230208/fbefeaa208d2492dbc06581a0bf6d6ef.png