實現圖片的循環滾動——JS的簡單應用

首先默認都了解JS的循環分支運算符等基本語法

用CSS實現簡單的布局也是會的。

然后我們就可以來了解一下

[DOM 樹節點]

它分為三大類：元素節點、文本節點、屬性節點

文本節點跟屬性節點為元素節點的兩個子節點。它有什么用呢，我們得取到節點，然后才能通過節點來設置節點的屬性，修改樣式。

[查看節點]

1. getElementById("div1")通過id獲取唯一節點:多個同名ID只會取第一個

2. getElementsByName()通過Name取到一個數組，包含一到多個節點

使用方式，通過循環，取到每個節點。循環次數，從零開始<數組.length

getElementsByClassName()與getElementsByTagName取到的都是數組，用法同getElementsByName()

示例：

function getById(){
            //取到屬性節點
            //    var divById = document.getElementById("div1").style;
                //取到元素節點
                var divById = document.getElementById("div1");
                //divById.style.backgroundColor = "blueviolet";//節點屬性用小駝峰命名
                divById.style.color="green";
                divById.innerHTML="<h5>cherishLi</h5>";//重置修改div里的中的HTML代碼
                if(divById.style.backgroundColor == "blue"){
                    divById.style.backgroundColor = "red";
                }
                else{
                    divById.style.backgroundColor = "blue";
                }

一個windows常用的方法我么這里也能用到，而且是最關鍵的，那就是設置定時器

setInterval:設置定時器，循環每隔N毫秒執行一次

兩個參數：需要執行的 function，毫秒數

示例：

var num =10;
        var out=setInterval(function(){
            document.write(num+"<br/>");
            num--;
            if(num==0){
                clearInterval(out);
            }
        },1000)

還有兩個很關鍵的屬性，我們要用到：

1.innerHTML屬性：設置或者獲取節點內部的所有Html代碼

2. innerText：設置或者獲取節點內部的所有文字

下面是這次主要要實現的功能：首先做一塊區域，在里面放下你所需要滾動的圖（當然圖片大小是一樣的，圖自己找嘍）

<section id="banner">
            <div id="inside">
                <img src="../img/12168431_1036060226444795_851404817_o_z1lzd7.jpg"/>
                <img src="../img/12388071_1065320530185431_2076280306_n_g93ygx.jpg"/>
                <img src="../img/12656432_1094243637293120_49905962_o_dk24or.jpg"/>
                <img src="../img/12903800_1136073019776848_60542799_o_rewsfx.jpg"/>
                <img src="../img/12910198_1136068819777268_2019684994_n_shntwd.jpg"/>
            </div>
            
        </section>

然后設置一下樣式（如何在只能顯示四張圖的區域放下十張圖）

*{
                margin: 0px;
                padding: 0px;
            }
            #banner{
                width: 440px;
                height: 110px;
                overflow: hidden;
                white-space: nowrap;
            }
            #inside{
                width: 1100px;
                height: 110px;
                position: relative;
                white-space: nowrap;
                transition: all 0.5s ease;

            }
            #inside img{
                float: left;
            }

最后是JS代碼,應該已經很明了了。每隔1s滾動100px，滾完5張，計數器清零。

var manyImg= document.getElementById("inside");
        manyImg.innerHTML=manyImg.innerHTML+manyImg.innerHTML;
//        console.log(manyImg.innerHTML=manyImg.innerHTML+manyImg.innerHTML);
        var i=0;
        var gun = setInterval(function(){
            i++;
            manyImg.style.transition="all 0.5s ease";
            switch (i){
                    case 1:
                        manyImg.style.transition="none";
                        inside.style.marginLeft = 0+"px";
                        break;
                    case 2:
                        inside.style.marginLeft = (-110)+"px";
                        break;
                    case 3:
                        inside.style.marginLeft = (-110-110)+"px";
                        break;
                    case 4:
                        inside.style.marginLeft = (-110-110*2)+"px";
                        break;
                    case 5:
                        inside.style.marginLeft = (-110-110*3)+"px";
                        break;
                    case 6:
                        
                        inside.style.marginLeft = (-110-110*4)+"px"
                        i = 0;
                        break;
                    case 7:
                        inside.style.marginLeft = (-110-110*5)+"px";
                        
                        break;
                    case 8:
                        inside.style.marginLeft = (-110-110*6)+"px";
                        break;
                    case 9:
                        inside.style.marginLeft = (-110-110*7)+"px";
                        break;
                    case 10:
                        inside.style.marginLeft = (-110-110*8)+"px";
                        break;
                    case 11:
                        inside.style.marginLeft = (-110-110*9)+"px";
                        
                        break;
                    default:
                        break;
                }
            
        },1000)

 如果需要加上數字按鈕控制對應的圖片，只需用ul或者div做好按鈕，加上一個函數控制就行

<ul id="bannerNumber">
                <li onclick="changeBan(1)">1</li>
                <li onclick="changeBan(2)">2</li>
                <li onclick="changeBan(3)">3</li>
                <li onclick="changeBan(4)">4</li>
  </ul>

function changeBan(num1){
            switch(num1){
                    case 1:
                        inside.style.marginLeft = 0+"px";
                        break;
                    case 2:
                        inside.style.marginLeft = (-110)+"px";
                        break;
                    case 3:
                        inside.style.marginLeft = (-110-110)+"px";
                        break;
                    case 4:
                        inside.style.marginLeft = (-110-110*2)+"px";
                        break;
                    case 5:
                        inside.style.marginLeft = (-110-110*3)+"px";
                        break;
            }
            i=num1-1;
        }

效果可以自己實踐一下=。=，這里就不插圖了