摘要：源碼下載地址鏈接提取碼寫(xiě)這篇文章，當(dāng)做是對(duì)自已這一天的一個(gè)總結(jié)寫(xiě)輪播圖要準(zhǔn)備的東西三張尺寸大小一樣的圖片分為三個(gè)模塊模塊，模塊，模塊模塊輪播圖引用本地固定的庫(kù)引入你寫(xiě)的文件引入你寫(xiě)的文件為你本地的圖片路徑，為你圖片的寬度，為類名左滑右滑

源碼下載地址：
鏈接：https://pan.baidu.com/s/16K9I...
提取碼：0ua2

寫(xiě)這篇文章，當(dāng)做是對(duì)自已這一天的一個(gè)總結(jié).
寫(xiě)輪播圖要準(zhǔn)備的東西：三張尺寸大小一樣的圖片.
分為三個(gè)模塊：HTML模塊，CSS模塊，Jquery模塊

HTML模塊：

    
    
     //引用本地固定的JQ庫(kù)
     //引入你寫(xiě)的CSS文件
     //引入你寫(xiě)的JQ文件


    

        

             //src為你本地的圖片路徑，width為你圖片的寬度，class為類名
            
            
            
        
        

            
<
 //左滑右滑按鈕
            
>
        
        
 //輪播狀態(tài)點(diǎn)
            

            

            

        
    
    

CSS模塊

*{
    padding:0; //初始化CSS樣式
    margin:0;
    list-style: none;
}
.photo_box{
    margin: 0 auto; //全有在這個(gè)盒子里的元素居中
    width: 1380px;  //設(shè)置盒子的寬度為圖片的寬度
    height: 350px;  //設(shè)置盒子的高度為圖片的高度
    overflow: hidden; //超出的部分隱藏
    position: relative; //定位為相對(duì)定位
    border:3px solid #000; //設(shè)置邊框
}

.img{
    width: 5520px;  //設(shè)置圖片加起來(lái)的總寬度
    height: 350px;  //設(shè)置為單張圖片的高度
    position: absolute; //定位為絕對(duì)定位，是相對(duì)于photo_box的盒子來(lái)改變的
    left: 0px; //對(duì)于photo_box的左邊間距為0
    top: 0px; //對(duì)于photo_box的上邊間距為0
}
.img img{
    float: left; //圖片為左浮動(dòng)，變成在同一條水平線上
}
.tab{
    position: absolute; //定位為絕對(duì)定位，是相對(duì)于photo_box的盒子來(lái)改變的
    top: 320px;  //對(duì)于photo_box的上邊間距為0
    left: 45%;  //對(duì)于photo_box的左邊間距為0
}
.tab li{
    width: 10px; //正方形的寬度為10px
    height: 10px; //正方形的高度為10px
    border: 2px solid #ffffff; //邊框的寬度為2px
    border-radius: 100%; //正方形的圓角值為100%，則正方形變?yōu)樵?    float: left; //li左浮動(dòng)
    margin-right: 8px; //圓點(diǎn)之間相互的間距為8px

}
.btn{
    width: 50px; //正方形的寬度為50px
    height: 50px; //正方形的高度為50px
    background-color: rgba(0,0,0,0.5);     //背景顏色
    color: #ffffff;     //字體顏色
    font-size: 28px;     //字體大小
    line-height: 46px;     //行高
    text-align: center;    //居中
    position: absolute;    //絕對(duì)定位
    top: 150px;           //距離頂部的高度為150
    border-radius: 100%;  //正方形的圓角值為100%，則正方形變?yōu)樵?    cursor: pointer;      //移動(dòng)到該目標(biāo)時(shí)，變?yōu)槭种感螤?}
.btn:hover{
    background-color: #FCC35E; 
}
.btn1{
    left: 150px;//對(duì)于photo_box的左邊間距為150px
}
.btn2{
    right: 150px;//對(duì)于photo_box的右邊間距為150px
}
.bg{
    background-color: #FCC35E;//圓點(diǎn)輪播點(diǎn)的顏色
}

JQuery模塊

var i=0;     //設(shè)置一個(gè)全局的I
var Timer;   //聲音一個(gè)計(jì)時(shí)器
$(function(){
    // var clone = $(".img img").first().clone(); 這是克隆第一張圖片
    // $(".img").append(clone);//把克隆的圖片放入圖片集中
    var length = $(".pic").length; //獲取圖片的張數(shù)
    $(".tab li").first().addClass("bg");//開(kāi)始就是第一張

    var Timer=setInterval(function(){ //設(shè)定計(jì)時(shí)器
        i++; //i存的是第幾張圖片
        move(); //圖片滑動(dòng)的方法
    },1000);
    //鼠標(biāo)劃入圓點(diǎn)
    $(".tab li").mouseenter(function() {
    var index = $(this).index(); //獲取當(dāng)前輪播的圖片到第幾張
    console.log(index);
    var i=index; //把這個(gè)第幾張賦值到i
    console.log(i);
    $(".img").stop().animate({left:-i*1380},500);//通過(guò)index就可以知道要把left改為多少，這次輪播圖的原理就是通過(guò)改變left來(lái)改變顯示的東西
    $(this).addClass("bg").siblings().removeClass("bg"); //給相對(duì)應(yīng)的圓點(diǎn)增加背景顏色
    /*自動(dòng)輪播*/
    
});
     
    //對(duì)banner定時(shí)器的操作
    $(".photo_box").hover(function(){
        clearInterval(Timer); //一旦鼠標(biāo)進(jìn)入到輪播頁(yè)后，清除計(jì)時(shí)器
    },function(){
        Timer=setInterval(move,2000);//離開(kāi)輪播頁(yè)后，重新加入定時(shí)器
    })

    /*向左按鈕*/
    $(".btn1").click(function(){ //點(diǎn)擊向左的按鈕
        i--; //此時(shí)i的數(shù)量減掉1
        move();//根據(jù)i來(lái)移動(dòng)
    })
   
    /*向右按鈕*/
     $(".btn2").click(function(){//點(diǎn)擊向右的按鈕
        i++;  //此時(shí)i的數(shù)量加1
    })
    
    function move(){
        if(i==length){
            $(".img").css({left:0});
            i=1; //如果i的值為圖片的張數(shù)，則此時(shí)i是第四張，所以它的下一張應(yīng)該為i=1，即第二張圖
        } 
        if(i==-1){
            $(" .img").css({left:-(length-1)*1380});
            i=length-2;
        } //如果i=-1，則length為第三張圖，所以是減掉2

        $(".img").stop().animate({left:-i*1380},500); //根據(jù)i來(lái)移動(dòng)它的left

        if(i==length-1){
            $(".tab li").eq(0).addClass("bg").siblings().removeClass("bg"); //如果i為第四張圖，則小圓點(diǎn)為第一個(gè)
        }else{
            $(".tab li").eq(i).addClass("bg").siblings().removeClass("bg"); //不是第四張圖，則根據(jù)原本的樣子，來(lái)
        }
    }
})

這是我寫(xiě)輪播圖的一個(gè)總結(jié)與思路，供大家參考.
希望我們都在進(jìn)步的路上.