2020-3-15 前端達(dá)人
首先在寫(xiě)代碼之前我們需要理清如何穿插圖片呢?
可以讓所有圖片都float:left,用一個(gè)大盒子裝進(jìn)所有圖片,在用一個(gè)小盒子顯示圖片,溢出圖片就hidden,之后以每張圖片的寬度來(lái)scrollLeft.
可以給每張圖片一個(gè)name/id,用循環(huán)遍歷所有圖片
可以用float:left,但是除了我要顯示的圖片外,其他圖片都hidden,之后每當(dāng)我需要某張圖片時(shí),我就把它制定到某位置
…
在這里,我將用第二種方法,因?yàn)樗苤庇^明了,我要哪張圖片我就調(diào)哪張圖片。
HTML部分:在div里面我裝了一張圖片,name:0, 這是為了在剛打開(kāi)的時(shí)候,我們的頁(yè)面是有東西的而不是一片空白。其他部分都好理解,不理解的可在下方評(píng)論。
<!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); }之后我們來(lái)看重中之重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張圖片存入一個(gè)數(shù)組 var arr = [oImg1, oImg2, oImg3, oImg4, oImg5]; window.onload = function() { //剛加載時(shí)第一張圖片1號(hào)背景顏色 document.getElementById("1").style.background = "peru"; run() } //輪播 function run() { timer = setInterval(function() { //隨機(jī)點(diǎn)數(shù)字時(shí)能接著變化 var pic = document.getElementById("insert").name; var shade = document.getElementById("insert"); //如果為最后一張圖片則重新循環(huán) if (pic == 4) { pic = -1; } //點(diǎn)一個(gè)數(shù)字該數(shù)字背景顏色變化其余的不變 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; //數(shù)字隨圖片變化 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"); // 數(shù)字跟著圖片一起變 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" // 向右移動(dòng)圖片 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]; } } } // 輪到最后一張圖片時(shí)返回第一張 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"); // 圖片移動(dòng)時(shí)數(shù)字也跟著變 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" // 向左移動(dòng)圖片 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]; } } } // 輪到第一張圖片時(shí)返回最后一張 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部分我寫(xiě)的很詳細(xì),仔細(xì)看的話是可以看懂的,主要分3個(gè)重要部分:
用src來(lái)調(diào)用每張圖片并給每張圖片一個(gè)name,這樣方便后面的重復(fù)使用
為下方的數(shù)字按鈕匹配圖片,點(diǎn)擊1跳到第1張圖片,點(diǎn)擊2跳到第2張圖片…因?yàn)槲野阉械膱D片都存在了一個(gè)數(shù)組里,所以在匹配的時(shí)候要注意數(shù)組0位置才是數(shù)字1指定的圖片
可以來(lái)回翻頁(yè),當(dāng)?shù)竭_(dá)最后一張圖片時(shí),我再點(diǎn)擊下一張圖片又能返回到第一張圖片了,亦或者當(dāng)我點(diǎn)擊到第一張圖片時(shí),再上一張圖片又回到第五張圖片了
效果如下:
大家有問(wèn)題可以在下方評(píng)論哦,看到了會(huì)及時(shí)回復(fù)噠!
————————————————
版權(quán)聲明:本文為CSDN博主「weixin_43964414」的原創(chuàng)文章,遵循 CC 4.0 BY-SA 版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/weixin_43964414/article/details/104844041
藍(lán)藍(lán)設(shè)計(jì)的小編 http://paul-jarrel.com