呼吸灯轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style:none;
        }
        .box{
            width: 520px;
            height: 280px;
            border:1px solid red;
            margin:100px auto 0;
            position: relative;
            /* overflow: hidden; */
        }
        .box ul{
            /* width: 2600px;
            width:3120px; */
            /* 因为将来要移动ul，所以需要定位 */
            position: relative;
        }
        .box ul li{
            position: absolute;
            left:0;
            top:0;
            display: none;
        }
        .box .active{
            display: block;
        }
        .box ol{
            position: absolute;
            left:50%;
            bottom:10px;
            /* background-color: red; */
            margin-left: -100px;
        }
        .box ol li{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color:orange;
            float: left;
            margin:5px 10px;    
            cursor: pointer;        
        }
        .box .current{
            background-color: #fff;
        }
        .box span{
            width:40px;
            height:60px;
            background-color:rgba(0,255,0,0.6);
            position: absolute;
            top:50%;
            margin-top: -30px;
            cursor: pointer;
        }
        .box .arrow-l{
            left:0;
        }
        .box .arrow-r{
            right:0;
        }
    </style>
    <script src="jquery-1.12.2.js"></script>
    <script>
        $(function(){
            var imgCount=0;
            $('#arrowRight').click(function(){
                imgCount++;
                if(imgCount>4){
                    imgCount=0;
                }
                changeImg(imgCount);               
            });

             $('#arrowLeft').click(function(){
                imgCount--;
                if(imgCount<0){
                    imgCount=4;
                }
                changeImg(imgCount);
               
            });

            var timer = setInterval(function(){
                $('#arrowRight').click();
            },2000);

            $('.box').hover(function(){
                clearInterval(timer);
            },function(){
                timer = setInterval(function(){
                    $('#arrowRight').click();
                },2000);
            });

            function changeImg(num){
                $('#imgBox li').eq(num).stop().fadeIn().siblings().stop().fadeOut()

                $('#dianBox li').eq(num).addClass('current').siblings().removeClass('current');
            }

        });
    </script>
</head>
<body>
    <div class="box">
        <ul id="imgBox">
            <li class="active"><img src="images/banner1.jpg" alt=""></li>
            <li><img src="images/banner2.jpg" alt=""></li>
            <li><img src="images/banner3.jpg" alt=""></li>
            <li><img src="images/banner4.jpg" alt=""></li>
            <li><img src="images/banner5.jpg" alt=""></li>
        </ul>
        <ol id="dianBox">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <span class="arrow-l" id="arrowLeft"></span>
        <span class="arrow-r" id="arrowRight"></span>
    </div>

      

</body>
</html>
猜你喜欢
