如何用js作簡單的輪播圖

時間 2019-11-09

標籤如何簡單欄目 JavaScript 简体版

原文原文鏈接

在網頁中咱們常常會見到各式各樣美觀的輪播圖效果，如何用JS的DOM操做來實現輪播圖效果？html

新建一個HTML文件，並準備幾張圖片做爲輪播圖this

頁面中有4項內容：輪播圖，兩個按鈕「上一張「下一站張」」，縮略圖htm

功能：點擊「上一張」或「下一張」能夠切換當前輪播圖的圖片，事件

鼠標懸停在輪播圖上回中止輪播，移開後輪播繼續進行圖片

輪播圖切換的同時，縮略圖也同時切換，並伴隨邊框的樣式變化，具體代碼以下：ip

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<script>
//定義全局變量
   var imgDom =null;
   var n=0;
   var intervalDom=null;
   var tt=2000;
   var imgs=null;
   var imgArr=["imgs/1.jpg","imgs/2.jpg","imgs/3.jpg","imgs/4.jpg","imgs/5.jpg","imgs/6.jpg"]
//頁面加載完後執行
window.onload= function(){//初始化變量
imgDom=document.getElementsByTagName("img")[0];
imgs=document.getElementsByClassName("imgs");
intervalDom=setInterval(next,tt);
}
function next(){     //點擊下一頁事件
   n++;
   if(n>=imgArr.length){
   n=0;
   }
   imgDom.setAttribute("src",imgArr[n]);
   addBorder();
}
function shang(){     //點擊上一頁事件
n--;
if(n<0){
   n=imgArr.length-1;
}
imgDom.setAttribute("src",imgArr[n]);
addBorder();
}
function stop(){     //鼠標移上中止輪播
clearInterval(intervalDom);
}
function start(){     //鼠標移開繼續輪播
   intervalDom=setInterval(next,tt);
}
function addBorder(){     //輪播時同時改變圖片對應縮略圖的樣式
for(var i=0;i<imgs.length;i++){
      imgs[i].style.border="";     //其餘圖片樣式爲空
}
imgs[n].style.border="1px solid red";    //對應縮略圖樣式改變
}
function change(obj,num) {     //點擊縮略圖跳轉到點擊的圖片,並改變此縮略圖的樣式
   for(var k=0;k<imgs.length;k++){
       imgs[k].style.border="";     //其餘圖片樣式爲空
   }
   obj.style.border="1px solid red";     //改變本縮略圖樣式
   n=num;
   imgDom.setAttribute("src",imgArr[n]);    //改變圖片
}

</script>
</head>
<body>
<button onClick="shang()">上一張</button>
<div>
   <img src="imgs/1.jpg" alt="" onMouseOver="stop()" onMouseOut="start()" width="300">
</div>
<button onClick="next()">下一張</button>
<div>
   <img src="imgs/1.jpg" onClick="change(this,0)" class="imgs" width="50">
   <img src="imgs/2.jpg" onClick="change(this,1)" class="imgs" width="50">
   <img src="imgs/3.jpg" onClick="change(this,2)" class="imgs" width="50">
   <img src="imgs/4.jpg" onClick="change(this,3)" class="imgs" width="50">
   <img src="imgs/5.jpg" onClick="change(this,4)" class="imgs" width="50">
   <img src="imgs/6.jpg" onClick="change(this,5)" class="imgs" width="50">
   <img src="imgs/7.jpg" onClick="change(this,6)" class="imgs" width="50">
</div>

</body>
</html>utf-8

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。