JavaScript實現圖片切換效果

來源：懂視網責編：小OO 時間：2020-11-27 22:32:52

JavaScript實現圖片切換效果

本文實例為大家分享了JavaScript實現圖片切換效果，自定義屬性的應用供大家參考，具體內容如下：<，否則不提示錯誤，但卻會加載不出來需要的內容。var oP = document.getElementsByTagName("p")[0]；var oNum = document.getElementsByTagName("span")[0]；var oUl = document.getElementsByTagName("ul")[0]；var aLi = oUl.getElementsByTagName("li")；//通過父標簽找到的子標簽，這里不能加數組[0] var arrUrl = ["img/1.jpg"，"img/2.jpg"，"img/3.jpg"。

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了JavaScript實現圖片切換效果，自定義屬性的應用供大家參考，具體內容如下：<，否則不提示錯誤，但卻會加載不出來需要的內容。var oP = document.getElementsByTagName("p")[0]；var oNum = document.getElementsByTagName("span")[0]；var oUl = document.getElementsByTagName("ul")[0]；var aLi = oUl.getElementsByTagName("li")；//通過父標簽找到的子標簽，這里不能加數組[0] var arrUrl = ["img/1.jpg"，"img/2.jpg"，"img/3.jpg"。

本文實例為大家分享了JavaScript實現圖片切換效果，自定義屬性的應用供大家參考，具體內容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>圖片切換實例</title>
 <style>
 body{
 background-color: #A9A9A9;
 margin:0px;
 }
 ul{
 padding: 0;
 margin: 0;
 }
 li{ 
 list-style: none;
 }
 #pic{
 width:670px;
 height: 420px;
 position:relative;
 margin: 0 auto;/*整個div放到頁面中間的位置*/
 background:url(img/loading.png) no-repeat center;
 background-color:#fff;

 }
 #pic img{
 width:670px;
 height: 420px;
 }
 #pic ul{
 position: absolute;
 top: 0px;
 right: -50px;
 }
 #pic li{
 width:40px;
 height:40px;
 margin-bottom: 4px;
 background:#666;
 }
 #pic .active{
 background: cadetblue;
 }
 #pic span{
 top:0px;


 }
 #pic p{
 bottom:0px;
 margin:0;

 }
 #pic p,#pic span{
 width: 670px;
 height: 30px;
 line-height: 30px;
 text-align: center;
 position:absolute;
 left:0px;
 color:#fff;
 background-color:#333;

 }
 </style>
 <script>


 window.onload = function(){
 var oDiv = document.getElementById("pic");
 var oImg = document.getElementsByTagName("img")[0];//有tag標簽的地方就得有數組[0],否則不提示錯誤，但卻會加載不出來需要的內容。
 var oP = document.getElementsByTagName("p")[0];
 var oNum = document.getElementsByTagName("span")[0]; 
 var oUl = document.getElementsByTagName("ul")[0];
 var aLi = oUl.getElementsByTagName("li");//通過父標簽找到的子標簽，這里不能加數組[0]

 var arrUrl = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.png"];
 var arrText = ["中原工學院圖書館","中工宿舍樓","玫瑰花","小貓咪","綠色盆栽"];

 for(var i=0;i<arrUrl.length;i++){
 oUl.innerHTML += "<li></li>";//添加用“+=”，該寫用“=”
 }
 //初始化
 //有數組的地方，大部分都有一個數字在靜靜的等待.數組配合數字以便找到需要的內容。
 var num = 0;
 oImg.src = arrUrl[num];
 oP.innerHTML = arrText[num];
 oNum.innerHTML = 1+num+'/'+arrUrl.length;
 //在ul中添加li,根據數組的長度，為ul添加li的數量
 aLi[num].className = "active";//為標簽添加class屬性，需要用到className

 for(i=0;i<aLi.length;i++){
 aLi[i].index = i;//索引值,需要添加對應關系，就要想到添加索引值
 //定義的有數組，就不能忘記加[0]
 aLi[i].onclick = function(){
 //點擊按鈕，找到與之對應的圖片
 oImg.src = arrUrl[this.index];
 oP.innerHTML = arrText[this.index];
 oNum.innerHTML = 1+this.index+'/'+arrUrl.length;
 //添加對應的點擊時，li的圖標發生變化，兩種思路
 //思路1：清空當前所有active樣式，為當前添加此class屬性（擴展性好，但是運行速度可能不好）
 for(var i=0; i<aLi.length; i++){
 aLi[i].className = "";
 }
 this.className = "active";
 //思路2：清空前一個點擊li的樣式，為當前添加class屬性（定點清除）
 }

 }


 } 
 </script>
 </head>
 <body>
 <div id="pic" >

 <img src=""/>
 <span>數量正在加載中......</span>
 <p>文字說明正在加載中......</p>
 <ul>

 </ul>
 </div>
 </body>
</html>

JavaScript代碼片段可以簡化成如下：

<script>


 window.onload = function(){
 var oDiv = document.getElementById("pic");
 var oImg = document.getElementsByTagName("img")[0];
 var oP = document.getElementsByTagName("p")[0];
 var oNum = document.getElementsByTagName("span")[0]; 
 var oUl = document.getElementsByTagName("ul")[0];
 var aLi = oUl.getElementsByTagName("li");
 var arrUrl = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.png"];
 var arrText = ["中原工學院圖書館","中工宿舍樓","玫瑰花","小貓咪","綠色盆栽"];
 for(var i=0;i<arrUrl.length;i++){
 oUl.innerHTML += "<li></li>";
 }
 //初始化
 var num = 0;
 function fnTab(){
 oImg.src = arrUrl[num];
 oP.innerHTML = arrText[num];
 oNum.innerHTML = 1+num+'/'+arrUrl.length;
 aLi[num].className = "";
 }
 fnTab();

 for(i=0;i<aLi.length;i++){
 aLi[i].index = i;
 aLi[i].onclick = function(){
 num = this.index;
 fnTab();
 }
 aLi[num].className = "active";
 }

 }


 } 
</script>

效果圖：