<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          原生代碼之實現輪播圖（左右翻頁，定時翻頁，指定翻頁）
          
				
           2020-3-15      前端達人      
          
			
          
			
          
				
          首先在寫代碼之前我們需要理清如何穿插圖片呢？

          


          
可以讓所有圖片都float：left，用一個大盒子裝進所有圖片，在用一個小盒子顯示圖片，溢出圖片就hidden，之后以每張圖片的寬度來scrollLeft.

          
可以給每張圖片一個name/id，用循環遍歷所有圖片

          
可以用float:left,但是除了我要顯示的圖片外，其他圖片都hidden，之后每當我需要某張圖片時，我就把它制定到某位置

          
…

          
在這里，我將用第二種方法，因為它很直觀明了，我要哪張圖片我就調哪張圖片。

          
HTML部分：在div里面我裝了一張圖片，name:0, 這是為了在剛打開的時候，我們的頁面是有東西的而不是一片空白。其他部分都好理解，不理解的可在下方評論。
          

          <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>輪播圖</title>
        <link rel="stylesheet" href="輪播圖.css" />
        <script src="輪播圖.js">
        </script>
    </head>

    <body>
        <header>
            <div id="oImg">
                <!-- 輪流播放圖片 -->
                <img id="insert" src="img/輪1.jpg" name="0"/>
            </div>
            <!-- 左右切換圖片 -->
            <p id="left" οnclick="goBack()"></p>
            <p id="right" οnclick="goForward()"></p>

            <ul id="nav">
                <!-- 指定某張圖片 -->
                <li id="1" οnclick="move(this)">1</li>
                <li id="2" οnclick="move(this)">2</li>
                <li id="3" οnclick="move(this)">3</li>
                <li id="4" οnclick="move(this)">4</li>
                <li id="5" οnclick="move(this)">5</li>
            </ul>
        </header>

    </body>

</html>

          

          

          CSS：
          

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

header {
    width: 100%;
    height: 680px;
    position: relative;

}

img {
    width: 100%;
    height: 680px; 
}   

#nav { 
    position: absolute;
    bottom: 5px;
    left: 30%;
}

#nav li {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #ccc;
    font-size: 24px;
    border-radius: 9px;
    color: darkslategrey;
    font-family: 'Times New Roman', Times, serif;
    margin: 0 25px;
    float: left;
    cursor: pointer;
    list-style: none;
}

#nav li:hover {
    background: peru;
}

#left {
    width: 25px;
    height: 24px;
    left: 0;
    top: 50%;
    cursor: pointer;
    position: absolute;
    background: url(img/fx1.png);
}

#right {
    width: 25px;
    height: 24px;
    right: 0;
    top: 50%;
    cursor: pointer;
    position: absolute;
    background: url(img/fx2.png);
}

          
之后我們來看重中之重JS部分
          
JavaScript:
          

          // 五張圖片的url
var oImg1 = "img/輪1.jpg";
var oImg2 = "img/輪2.jpg";
var oImg3 = "img/輪3.jpg";
var oImg4 = "img/輪4.jpg";
var oImg5 = "img/輪5.jpg";
// 把5張圖片存入一個數組
var arr = [oImg1, oImg2, oImg3, oImg4, oImg5];

window.onload = function() {
    //剛加載時第一張圖片1號背景顏色
    document.getElementById("1").style.background = "peru";  
    run()

}

//輪播
function run() { 
    timer = setInterval(function() {
        //隨機點數字時能接著變化 
        var pic = document.getElementById("insert").name;
        var shade = document.getElementById("insert");  

        //如果為最后一張圖片則重新循環
        if (pic == 4) {
            pic = -1;
        }

        //點一個數字該數字背景顏色變化其余的不變
        var aLi = document.getElementsByTagName("li");
        for (var j = 0; j < aLi.length; j++) {
            aLi[j].style.backgroundColor = "#CCCCCC";
        } 

        var i = parseInt(pic);   

        document.getElementById("insert").src = arr[i + 1]; 

        document.getElementById("insert").name = i + 1; 

        //數字隨圖片變化
        switch (i) {
            case 0:
                var temp = '2';
                break;
            case 1:
                var temp = '3';
                break;
            case 2:
                var temp = '4';
                break;
            case 3:
                var temp = '5';
                break;
            case -1:
                var temp = '1';
                break;
        }
        document.getElementById(temp).style.background = "peru"   

    }, 5000)
}

//右箭頭 
function goForward() {
    var temp = document.getElementById("insert").name;
    var oBox = document.getElementById("insert"); 
    var aLi = document.getElementsByTagName("li");
    // 數字跟著圖片一起變
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.backgroundColor = "#CCCCCC";
    }

    switch (temp) {
        case "0":
            var n = '2';
            break;
        case "1":
            var n = '3';
            break;
        case "2":
            var n = '4';
            break;
        case "3":
            var n = '5';
            break;
        case "4":
            var n = '1';
            break;
    }

    document.getElementById(n).style.background = "peru"
    // 向右移動圖片
    for (var j = 0; j < arr.length; j++) {
        if (j < 4) {
            if (temp == j) {
                oBox.src = arr[j + 1]; 
            }
        } else {
            if (temp == 4) {
                oBox.src = arr[0]; 
            }
        }
    } 
    // 輪到最后一張圖片時返回第一張
    if (temp < 4) {
        oBox.name = parseInt(temp) + 1;
    } else {
        oBox.name = 0;
    }
}

//左箭頭
function goBack() {
    var temp = document.getElementById("insert").name;
    var oBox = document.getElementById("insert")
    var aLi = document.getElementsByTagName("li");
    // 圖片移動時數字也跟著變
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.backgroundColor = "#CCCCCC";
    }

    switch (temp) {
        case "0":
            var n = '5';
            break;
        case "1":
            var n = '1';
            break;
        case "2":
            var n = '2';
            break;
        case "3":
            var n = '3';
            break;
        case "4":
            var n = '4';
            break;
    }

    document.getElementById(n).style.background = "peru"
    // 向左移動圖片 

    for (var j = 0; j < arr.length; j++) {
        if (j > 0) {
            if (temp == j) {
                oBox.src = arr[j - 1];
            }
        } else {
            if (temp == 0) {
                oBox.src = arr[4];
            }
        }
    }
    // 輪到第一張圖片時返回最后一張
    if (temp > 0) {
        oBox.name = parseInt(temp) - 1;
    } else {
        oBox.name = 4;
    }
}

//指定圖片
function move(num) { 
    var oBox = document.getElementById("insert");
    var temp = document.getElementById("insert").name;
    var aLi = document.getElementsByTagName("li");
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.backgroundColor = "#CCCCCC";
    }

    document.getElementById(num.innerHTML).style.background = "peru"

    switch (num.innerHTML) {
        case "1":
            oBox.src = arr[0];
            oBox.name = 0;
            break;
        case "2":
            oBox.src = arr[1];
            oBox.name = 1;
            break;
        case "3":
            oBox.src = arr[2];
            oBox.name = 2;
            break;
        case "4":
            oBox.src = arr[3];
            oBox.name = 3;
            break;
        case "5":
            oBox.src = arr[4];
            oBox.name = 4;
            break;
    }
}

          
JavaScript部分我寫的很詳細，仔細看的話是可以看懂的，主要分3個重要部分：
          

          
用src來調用每張圖片并給每張圖片一個name，這樣方便后面的重復使用
          
為下方的數字按鈕匹配圖片，點擊1跳到第1張圖片，點擊2跳到第2張圖片…因為我把所有的圖片都存在了一個數組里，所以在匹配的時候要注意數組0位置才是數字1指定的圖片
          
可以來回翻頁，當到達最后一張圖片時，我再點擊下一張圖片又能返回到第一張圖片了，亦或者當我點擊到第一張圖片時，再上一張圖片又回到第五張圖片了
          
效果如下：
          

          

          
    點擊查看原圖

          

          
    點擊查看原圖

          
大家有問題可以在下方評論哦，看到了會及時回復噠！
          

          

          
    
          

          

          
    ————————————————
          
版權聲明：本文為CSDN博主「weixin_43964414」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
          
原文鏈接：https://blog.csdn.net/weixin_43964414/article/details/104844041
          

          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合