image.png

思路

1. 通過banner下方的小圓點，控制圖片的切換。
2. 給左右箭頭添加點擊事件（點擊時切換圖片，并且下方的小圓點跟著切換）。
3. 自動切換（2秒切換一次圖片）。
4. 當(dāng)鼠標(biāo)移動到banner上時，停止“自動切換”（停止第3步）。
5. 當(dāng)鼠標(biāo)移開時，開始繼續(xù)“自動切換”（繼續(xù)開始第3步）。

原理

image.png

黑框是容器，要做無縫輪播，頭和尾的圖片需要一樣。
所有圖片都放在 ul 里面，通過移動 ul 實現(xiàn)圖片的切換。

容器要設(shè)置 overflow: hidden，把溢出部分的圖片隱藏掉。

HTML代碼

<div class="banner">
    <ul class="bannerAllPic">
        <li><a href="#"><img src="../img/bg1.jpg" alt=""></a></li>
        <li><a href="#"><img src="../img/bg2.jpg" alt=""></a></li>
        <li><a href="#"><img src="../img/bg3.jpg" alt=""></a></li>
        <li><a href="#"><img src="../img/bg4.jpg" alt=""></a></li>
        <li><a href="#"><img src="../img/bg5.jpg" alt=""></a></li>
        <li><a href="#"><img src="../img/bg6.jpg" alt=""></a></li>
    </ul>
    <div class="arrow">
        <a href="javascript:void(0)" class="aLeft">&lt;</a>
        <a href="javascript:void(0)" class="aRight">&gt;</a>
    </div>
    <ol class="circleAll"></ol>
</div>

CSS代碼

* {
    margin: 0;
    padding: 0;
    list-style: none;
}
a {
    text-decoration: none;
}
.banner {
    width: 700px;
    height: 314px;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
}
.bannerAllPic {
    position: relative;

}
.bannerAllPic>li {
    float: left;
}
.arrow a{
    width: 30px;
    height: 50px;
    background: rgba(0,0,0,.4);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 20px;
    font-family: '宋體';
    display: none;
}
.banner:hover .arrow a {
    display: block;
}
.aLeft {
    left: 0;
}
.aRight {
    right: 0;
}
.circleAll {
    position: absolute;
    background: rgba(0,0,0,.4);
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    padding: 0 5px;
}
.circleAll li {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    float: left;
    margin: 3px 5px;
    cursor: pointer;
}
.circleAll .now {
    background: pink;
}

jQuery代碼

<script src="../scripts/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        var banner = $('.banner');  // 獲取容器
        var bannerUl = $('.bannerAllPic');  // 獲取ul（裝了所有圖片的ul）
        var aLeft = $('.aLeft');  // 獲取左箭頭
        var aRight = $('.aRight');  // 獲取右箭頭
        var circleAll = $('.circleAll');  // 獲取小圓點的容器（ol）
        var width = parseInt($('.banner').css('width'));  // 獲取容器的寬度
        var index = 0;    // 計數(shù)器

        /*
          根據(jù)上圖所示，我們需要把第一張圖復(fù)制到最后
        */
        // 獲取第一張圖，用clone()復(fù)制，并把值賦給變量 liFirst，把變量 liFirst 添加到 ul后面。
        var liFirst = $('.banner>.bannerAllPic>li:first').clone();
        bannerUl.append(liFirst);

        /*
          根據(jù)圖片的數(shù)量來控制ul的寬度
        */
        // 獲得圖片的數(shù)量，并賦給變量 imgNum
        var imgNum = $('.bannerAllPic > li').length;
        bannerUl.css('width' , imgNum * width);  // 設(shè)置ul的寬度

        // 根據(jù)圖片的數(shù)量來生成小圓點的個數(shù)
        while(index < imgNum-1) {
            circleAll.append("<li></li>");
            index++;
        }
        // 設(shè)置第一個圓點的默認(rèn)樣式
        var firstCircle = $('.circleAll>li:first');
        firstCircle.addClass('now');

        // 通過小圓點控制圖片切換
        var littleCircle = $('.circleAll>li');
        littleCircle.click(function() {
            $(this).addClass('now').siblings().removeClass('now');  // 被點擊的小圓點添加“now”類，其他小圓點移除“now”類
            index = $(this).index();  // 獲取當(dāng)前被點擊的小圓點的下標(biāo)值
            bannerUl.animate({left: -index * width});  // 通過當(dāng)前小圓點的下標(biāo)值做參考，移動 ul
        });


        // 點擊右側(cè)按鈕
        /*
        顯示倒數(shù)第二張（即展示的最后一張）時，再按一下，劃到最后一張（即復(fù)制出來的那張，和第一張一    模一樣）。再按一下，把index變?yōu)?，同時會瞬間切換到第一張，因為沒做動畫，所以用戶看不出來切換效果。
        */

        /*
          如果計數(shù)器（index）變成所有圖片的數(shù)量的值時（即已經(jīng)指向了最后一張圖），把計數(shù)器變回0（指向第一張圖），并把ul的left設(shè)為0。
        */
        aRight.click(function() {
            if(index == imgNum-1) {
                index = 0;
                bannerUl.css('left' , 0);
            }
            index++;
            bannerUl.stop().animate({left: -index * width});

            // 每點擊一次右箭頭，小圓點就向后指示一次。
            if(index == imgNum-1){
                littleCircle.eq(0).addClass('now').siblings().removeClass('now');
            } else {
                littleCircle.eq(index).addClass('now').siblings().removeClass('now');
            }
        });


        // 點擊左箭頭的原理和點擊右箭頭的原理差不多
        aLeft.click(function() {
            if(index<=0) {
                index = imgNum-1;
                bannerUl.css('left' , -index * width);
            }
            index--;
            bannerUl.stop().animate({left: -index * width});
            littleCircle.eq(index).addClass('now').siblings().removeClass('now');
            });


            // 自動切換
            var timeId = setInterval(function() {
                aRight.click();
            }, 2000);

            // 鼠標(biāo)經(jīng)過事件
            banner.hover(function() {
                clearInterval(timeId);
            }, function() {
                timeId = setInterval(function() {
                aRight.click();
            }, 2000);
        });
    });
</script>

jQuery總目錄：jQuery目錄

上一篇：【jQuery】阻止鏈接打開

下一篇：【jQuery】京東banner輪播圖