【jQuery】輪播圖原理及初始代碼

時間 2019-12-06
原文原文鏈接
jQuery輪播圖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .carousel-box{
            width: 670px;
            height: 240px;
            position: relative;
            margin: 0 auto;
        }
        .carousel-box img{
            width: 670px;
            height: 240px;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .carousel-box ul{
            position: absolute;
            left: 50%;
            margin-left: -78px;
            bottom: 5px;
            z-index: 2;
        }
        .carousel-box ul li{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            float: left;
            margin-left: 6px;
            background-color: #999;
            font-size: 12px;
            color: #fff;
            line-height: 20px;
            text-align: center;
        }
        .carousel-box ul li.red{
            background-color: orangered;
        }
        .carousel-box .arrow-left{
            display: block;
            width: 25px;
            height: 33px;
            background: url(images/bg4.png) -85px -45px;
            position: absolute;
            left: 2px;
            top: 90px;
            z-index: 2;
        }
        .carousel-box .arrow-right{
            display: block;
            width: 25px;
            height: 33px;
            background: url(images/bg4.png) -55px -45px;
            position: absolute;
            right: 2px;
            top: 90px;
            z-index: 2;
        }
        .imgz{
            z-index: 1;/*z-index爲了提升第一張圖的層級*/
        }
    </style>
</head>
<body>
    <div class="carousel-box">
        <img class="imgz" src="images/content_1.jpg" alt="">
        <img src="images/content_3.jpg" alt="">
        <img src="images/content_4.jpg" alt="">
        <img src="images/content_5.jpg" alt="">
        <img src="images/content_6.jpg" alt="">
        <img src="images/content_7.jpg" alt="">
        <ul>
            <li class="red">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
        <span class="arrow-left"></span>
        <span class="arrow-right"></span>
    </div>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function(){
            // 自動輪播
            var c = 0;
            function run(){
                c++;
                c = (c==6)?0:c;
                // 讓c號圖片顯示，其餘圖片隱藏  讓c號的li變色，其餘的默認
                $('.carousel-box img').eq(c).show().siblings('img').hide();
                $('.carousel-box ul li').eq(c).addClass('red').siblings('li').removeClass('red');
            }
            timer = setInterval(run,5000);
            
            // 鼠標移入li的效果
            $('.carousel-box ul li').mouseover(function() {
                clearInterval(timer);
                // 得到當前li的序號
                var c = $(this).index();
                // 顯示c號圖片，其餘隱藏  讓c號li變色，其餘默認
                $('.carousel-box img').eq(c).fadeIn(2000).siblings('img').hide();
                $('.carousel-box ul li').eq(c).addClass('red').siblings('li').removeClass('red');
            });
            
            // 箭頭
            $('.carousel-box .arrow-right').click(function() {
                clearInterval(timer);
                c++;
                c = (c==6)?0:c;
                $('.carousel-box img').eq(c).show().siblings('img').hide();
                $('.carousel-box ul li').eq(c).addClass('red').siblings('li').removeClass('red');
            });
            $('.carousel-box .arrow-left').click(function() {
                clearInterval(timer);
                c--;
                c = (c==-1) ? 5 : c;
                $('.carousel-box img').eq(c).show().siblings('img').hide();
                $('.carousel-box ul li').eq(c).addClass('red').siblings('li').removeClass('red');
            });
            
            // 鼠標移出事件
            $('.carousel-box ul li,.carousel-box .arrow-right,.carousel-box .arrow-left').mouseout(function(){
                timer = setInterval(run,5000);
            });
        })
    </script>
</body>
</html>