純js輪播圖的製作

1.做這樣一個輪播圖框架其實就是對裝圖片的div的隱藏和顯示問題
技術要點：定時器的運用 圖片索引與變量對上號的問題 div的隱藏顯示問題
先行寫好前端界面：

注意：我這裏製作的是三個圖片的輪播圖，當然你如果想要別的幾張圖片，改變div幾個就行了
js代碼：

//先讓他自動滾動吧,鼠標放上面就清除，挪走就開始計時
var index=0;
var timer=null;
//有問題
var la=document.getElementsByClassName("img")[0].getElementsByTagName("div");
var sum=la.length;
console.log("sum的值爲"+sum);
main();
function main(){
    var main=document.getElementsByClassName("main")[0];
    time();
    main.onmouseover=function () {
        clean();
    }
    main.onmouseout=function () {
        time();
    }
    circle();
}
//計時器
function time() {
    timer=setInterval(function () {
        index++;
        if(index>=sum){
            index=0;
        }
        console.log(index);
        autoimg();
    },3000);
}
function clean() {
    clearInterval(timer);
}
//圖片進行滾動的函數
function autoimg() {
    for(var i=0;i<sum;i++){
        document.getElementsByClassName("img")[0].getElementsByTagName("div")[i].style.display="none";
    }
    document.getElementsByClassName("img")[0].getElementsByTagName("div")[index].style.display="block";
}
//對三個圓點搞的元素
function circle() {
    for (var i=0;i<sum;i++){
        document.getElementsByClassName("circle")[0].getElementsByTagName("div")[i].id=i;
        document.getElementsByClassName("circle")[0].getElementsByTagName("div")[i].onclick=function () {
            index=this.id;
            autoimg();
        }
    }
}
//一前一後搞前後
document.getElementsByClassName("pre")[0].onclick=function () {
    index--;
    if(index<0){
        index=2;
    }
    autoimg();
}
document.getElementsByClassName("next")[0].onclick=function () {
        index++;
        if(index>=sum){
            index=0;
        }
        autoimg();
    }

步驟爲：
1.寫一個定時器，當進入頁面的時候就開始運行，定義一個全局變量i,當i>=3的時候讓i變爲0,
根據這個索引來切換圖片的索引就可以 。
2.然後就是點擊圓點切換圖片問題：
當點擊某個圓點的時候，對應的顯示某張圖片，要實現這樣的效果，首先你得知道你點擊的是哪個圓點，所以定義一個外循環，然後因爲外循環經過事件會變成最終態，所以我們提前將每個圓點設置ID屬性，當點擊之後，將id屬性的值給我們的全局變量i,讓i去給我們尋找圖片，然後就完成了這一步
3.再就是點擊前後切換按鈕切換前後的圖片問題：
當點擊前一個的時候，將i–,如果小於0，則變爲2，去顯示圖片
當點擊後一個的時候，將i++,如果等於3，則變爲0，去顯示圖片
4.這樣就完成了，根據我的代碼結合我的分析即可完成

css代碼：

*{   margin: 0;
    padding: 0;
}
.top{
    width: 100%;
    height: 100px;
    background-color: #E0e0e0;
}
.main{
    width: 100%;
    height: 460px;
    background-color: #d0d0d0;
    position: relative;
}
.img{
    width: 1200px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.img div{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    display: none;
}
.circle {
    position: absolute;
    right: 300px;
    top:420px;
}
.circle div{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: red;
}
.pre{
    position: absolute;
    left: 200px;
    top:230px;
    width: 20px;
    height: 20px;
    background-color: lightgreen;
}
.next{
    position: absolute;
    right: 200px;
    top:230px;
    width: 20px;
    height: 20px;
    background-color: lightgreen;
}