需求：

1. 五張尺寸為700*400的圖片 實現(xiàn)自動輪播 時間三秒
2. 顯示輪播指示索引 點(diǎn)擊索引顯示對應(yīng)圖片
3. 增加左右切換按鈕 點(diǎn)擊手動輪播圖片
4. 鼠標(biāo)放上去顯示箭頭 離開隱藏
5. 鼠標(biāo)移至圖片 停止輪播

首先引入：jquery-1.10.2.min.js 放在js文件夾下

下載鏈接：https://pan.baidu.com/s/1jIFUVem

.html

導(dǎo)入相關(guān)文件

    <link rel="stylesheet" type="text/css" href="css/demo1.css"/>
    <script src="js/jquery-1.10.2.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/demo1.js" type="text/javascript" charset="utf-8"></script>

圖片div

    <div id="imglist">
        <div class = "img-item">
            < img src="img/1.png"/>
        </div>
        <div class = "img-item">
            < img src="img/2.png"/>
        </div>
        <div class="img-item">
            < img src="img/3.png"/>
        </div>
        <div class="img-item">
            < img src="img/4.png"/>
        </div>
        <div class="img-item">
            < img src="img/5.png"/>
        </div>
    </div>

左右按鈕div

    <div class="btn leftBtn">
        < img src="img/leftBtn.png"/>
    </div>
    <div class="btn rightBtn">
        < img src="img/rightBtn.png"/>
    </div>

指示器div

    <div id="pages">
        <div class="page-item bg">
            1
        </div>
        <div class="page-item ">
            2
        </div>
        <div class="page-item">
            3
        </div>
        <div class="page-item">
            4
        </div>
        <div class="page-item">
            5
        </div>
    </div>

.css

去除默認(rèn)標(biāo)簽內(nèi)外間距

* {
    padding: 0px;
    margin: 0px;
}

圖片

#imglist .img-item {
    float: left;
    position: absolute;
}

左右兩側(cè)按鈕

.btn {
    position: absolute;
    top: 175px;
    display: none;
}

.leftBtn {
    left: 20px;
}

.rightBtn {
    left: 630px;
}

指示器

#pages {
    position: absolute;
    left: 265px;
    top: 350px;
}

.page-item {
    width: 30px;
    height: 30px;
    background-color: #F1F1F1;
    line-height: 30px;
    text-align: center;
    float: left;
    margin-right: 10px;
    border-radius: 100%; /*剪切圓角*/
    cursor: pointer; /*鼠標(biāo)放上去顯示手型*/
}

.bg {
    background-color: #FF0000;
}

.js

//下標(biāo)
var i = 0;
//定時器
var time;
//啟動執(zhí)行
$(function() {

//1.默認(rèn)顯示第一張圖片
//$(".img-item")  獲取class = img-item 對象
//$(".img-item").eq(0)  獲取class = img-item 的第一個對象
//$(".img-item").eq(0).show() 獲取class = img-item 的第一個對象 并顯示
//$(".img-item").eq(0).show().siblings() 獲取class = img-item 的第一個對象 并顯示 其余的兄弟元素
//$(".img-item").eq(0).show().siblings().hide() 獲取class = img-item 的第一個對象 并顯示 其余的兄弟元素隱藏
$(".img-item").eq(0).show().siblings().hide();

//2.開啟定時器 
showTime();

//3.給page-item增加鼠標(biāo)移上去和離開事件
$(".page-item").hover(function() { //鼠標(biāo)移上去事件

    //3.0停止計時器
    clearInterval(time);

    //3.1拿到下標(biāo)索引 
    i = $(this).index();
    //3.2圖片滾動到索引位置
    PageScroll();

}, function() { //鼠標(biāo)離開事件

    //3.3開啟計時器
    showTime();

});

//4.給左邊按鈕增加點(diǎn)擊事件
$(".leftBtn").click(function() {

    //4.0停止計時器
    clearInterval(time);

    //4.1 下標(biāo)減1 下標(biāo)為0時 下標(biāo)歸4??
    if(i > 0) {
        i--;
    } else {
        i = 4
    }

    //4.2 滾動
    PageScroll();

    //4.3開啟計時器
    showTime();
})

//5.給右邊按鈕增加點(diǎn)擊事件
$(".rightBtn").click(function() {
    //5.0停止計時器
    clearInterval(time);
    //5.1下標(biāo)+1超過4重置0
    if(i >= 4) {
        i = 0
    } else {
        i++;
    }
    //5.2滾動
    PageScroll();
    //5.3開啟計時器
    showTime();
})

//6.0鼠標(biāo)移動至 圖片
$(".img-item").hover(function(){//鼠標(biāo)放上圖片
    
    //6.1停止計時器
    clearInterval(time);
    //6.2顯示左右箭頭
    $(".btn").show();
    
},function(){//鼠標(biāo)離開圖片
    
    //6.3開啟計時器
    showTime();
    //6.4隱藏左右箭頭 
     $(".btn").hide()
    
})

})

計時器事件

function showTime() {
    // 計時器 三秒執(zhí)行 一次輪播
    time = setInterval(function() {

        //1.控制輪播下標(biāo) 最大4（圖片的數(shù)量-1）
        if(i >= 4) {
            i = 0
        } else {
            i++;
        }
        console.log(i);
        //2.圖片滾動
        PageScroll();

    }, 3000);
}

圖片滾動事件

function PageScroll() {

    //1.圖片滾動切換
    //fadeIn(300)  三秒顯示
    //fadeOut(300) 三秒隱藏
    $(".img-item").eq(i).fadeIn(300).siblings().fadeOut(300);
    //2.page滾動切換
    //2.1直接增加css
    //  $(".page-item").eq(i).css("background-color", "#FF0000").siblings().css("background-color", "#F1F1F1");
    //2.2增加class
    $(".page-item").eq(i).addClass("bg").siblings().removeClass("bg");

}