原生JS—實現圖片循環切換及監測鼠標滾動切換圖片

時間 2019-11-13

標籤原生實現圖片循環切換監測鼠標滾動欄目 JavaScript 简体版

原文原文鏈接

今天咱們主要講講如何使用原生JS實現圖片的循環切換的方法以及如何檢測鼠標滾動循環切換圖片。多餘的話咱們就很少說了，咱們一個一個開始講吧。javascript

1 原生JS實現圖片循環切換 —— 方法一

在上栗子以前咱們先簡單介紹一下所用的一些知識點。首先是——JS中的數組，什麼是數組呢？其實數組就是在內存空間中連續存儲有序數據的結合，元素在數組中的順序，成爲下標，可使用下標訪問數組的每一個元素。咱們聲明數組有以下方式：css

一、使用字面量申明：var arr=[ ];html

二、在JS中，同一數組，能夠存儲各類數據類型，直接將數據存儲在數組中前端

例如：var arr=[1,"chuan",true,{},null,func];java

三、使用new關鍵字申明：var arr=new Array(參數);數組

參數能夠是：
     參數省略，表示建立一個空數組；
     參數爲一個整數，表示申明一個length爲指定長度的數組。可是這個length能夠隨時可變可追加。
     參數爲逗號分隔的都個數值，表示數組的多個值。
     new array(1,2,3)==[1,2,3]瀏覽器

接着就是——setInterval，這個是用來設置定時器，每隔n秒執行一次，接受兩個參數：須要執行的function、毫秒數。clearInterval 就是用來清除定時器。學習

如今咱們上栗子啦！！測試

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title></title>
 6         <style type="text/css">
 7             #img{
 8                 left: -300px;
 9                 position: relative;
10                 top:-50px
11             }
12         </style>
13     </head>
14     <body>
15         <div id="div">
16             <img id=obj src ="img/Shop_Isle_5-300x300.jpg" border =0 /> 
17         </div>
18         
19         
20     <script type="text/javascript">
21         var arr=new Array();
22         arr[0]="img/Shop_Isle_5-300x300.jpg";
23         arr[1]="img/Shop_Isle_6-300x300.jpg";
24         arr[2]="img/Shop_Isle_7-300x300.jpg";
25         arr[3]="img/Shop_Isle_8-300x300.jpg";
26         arr[4]="img/Shop_Isle_9-300x300.jpg";
27         arr[5]="img/Shop_Isle_2-300x300.jpg";
28         arr[6]="img/Shop_Isle_4-300x300.jpg";
29         var curIndex=0;
30         setInterval(function() {
31             var obj=document.getElementById("obj");
32             var img=document.getElementById("img");
33             if(curIndex==arr.length - 1) {
34                 curIndex=0;
35             }
36             else {
37                 curIndex +=1;
38             }
39             obj.src=arr[curIndex];
40             console.log(curIndex);
41         },1000)
42     </script>
43     </body>
44 </html>

2 原生JS實現圖片循環切換 —— 方法二

接着咱們說說使用原生JS實現圖片循環切換的第二種方法。網站

首先咱們仍是先講講所使用的到知識——JS中的循環，JS中有不少種循環方式，咱們今天主要講講JS中的for循環。

一、for循環有三個表達式：
    申明循環變量
    判斷循環條件
    更新循環變量
   三個表達式之間用分號分隔，三個表達式能夠省略，可是兩個分號缺一不可。
  三、for循環執行特色：先判斷，再執行，與while相同。
  四、for循環三個表達式均可以有多部分組成；第二部分多個判斷條件用&& ||連接，第一三部分用逗號分隔；

講到循環了，咱們順便說說——break和continue。

一、break：跳出本層循環，繼續執行循環後面的語句。
       若是有多層嵌套，則只跳出一層。
二、continue：跳過本次循環剩餘的代碼，繼續執行下一次循環。
      對於for循環，continue以後執行的語句，是循環變量更新的語句i++
      對於while、do-while循環，continue以後執行的語句，是循環條件判斷；
      所以，使用這兩個循環時，必須將continue放到i++以後使用。不然continue跳過i++致使死循環。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>測試</title>
 6         <script type="text/javascript">
 7             var NowImg=1;//表示當前顯示的div
 8             var MaxImg=5;//表示div的個數
 9             
10             setInterval(function(){
11                 for(var i=1;i<=MaxImg;i++){
12                     if(NowImg==i)
13                         document.getElementById("div"+NowImg).style.display='block';//當前顯示的div
14                     else
15                         document.getElementById("div"+i).style.display='none';
16                 }
17                 if(NowImg==MaxImg)//判斷當前div是不是最後一個，若是是則從第一個從新輪迴顯示
18                     NowImg=1;
19                 else
20                     NowImg++;//設置下一個顯示的圖片
21             },1000)
22         </script>
23     </head>
24     <body>
25         <div>
26             <div id="div1" style="display:block;"><img src="img/Shop_Isle_9-300x300.jpg" /></div>
27             <div id="div2" style="display:none;"><img src="img/Shop_Isle_2-300x300.jpg" /></div>
28             <div id="div3" style="display:none;"><img src="img/Shop_Isle_4-300x300.jpg" /></div>
29             <div id="div4" style="display:none;"><img src="img/Shop_Isle_5-300x300.jpg" /></div>
30             <div id="div5" style="display:none;"><img src="img/Shop_Isle_8-300x300.jpg" /></div>
31         </div>
32     <body>
33 </html>

3 監測鼠標滾動切換圖片

使用JS判斷鼠標滾動是向上仍是向下滾動。監測鼠標對不一樣瀏覽器有不一樣判斷方法。當用戶經過鼠標滾輪與頁面交互、在垂直方向上滾動頁面時（不管向下仍是向上），就會觸發mousewheel事件。當用於向前滾動鼠標滾輪是，wheelDelta是120的倍數；當用戶向後滾動鼠標滾輪是，wheelDelta是-120的倍數。判斷滾輪向上或向下須要考慮瀏覽器的兼容性，對於如今的瀏覽器，包括（IE、Opera、Safari、Firefox、Chrome），其中Firefox 使用detail，其他的幾個瀏覽器使用wheelDelta。二者只在取值上不一致，detail與wheelDelta只各取兩個值，detail只取±3，wheelDelta只取±120，其中正數表示爲向上，負數表示向下。火狐向下滑動爲正，向上爲負，與其餘的幾個瀏覽器正好相反。

一、判斷瀏覽器IE，谷歌滑輪事件

1 if (e.wheelDelta) {  //判斷瀏覽器IE，谷歌滑輪事件               
2             if (e.wheelDelta > 0) { //當滑輪向上滾動時  
3                 alert("滑輪向上滾動");  
4             }  
5             if (e.wheelDelta < 0) { //當滑輪向下滾動時  
6  alert("滑輪向下滾動");  
7             }  
8         }

二、判斷瀏覽器Firefox滑輪事件。

1 if (e.detail) {  //Firefox滑輪事件  
2             if (e.detail> 0) { //當滑輪向上滾動時  
3                 alert("滑輪向上滾動");  
4             }  
5             if (e.detail< 0) { //當滑輪向下滾動時  
6                 alert("滑輪向下滾動");  
7             }  
8  }

三、給頁面綁定滑輪滾動事件（firefox）

1 if (document.addEventListener) { 
2         document.addEventListener('DOMMouseScroll', scrollFunc, false);  
3     }

四、滾動滑輪觸發scrollFunc方法（ie 谷歌）

1  window.onmousewheel = document.onmousewheel = scrollFunc;

接下來說個實例吧，讓你們更加明白鼠標滾動事件的監測。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         
 7 <script type="text/javascript">
 8   var img=1;
 9   function MouseWheel(e){
10     e=e||window.event;
11     for(i=1;i<4;i++){
12       if(i==img){
13           if(e.wheelDelta){//IE
14              document.getElementById("img"+i).style.display="block";
15             }else if(e.detail){//Firefox
16              document.getElementById("img"+i).style.display="block";
17             }
18         }else{
19           document.getElementById("img"+i).style.display="none";
20         }
21       }
22       if(img==3){
23         img=1;
24       }else{
25         img++;
26       }
27     }
28   /*Firefox註冊事件*/
29   if(document.addEventListener){
30       document.addEventListener("DOMMouseScroll",MouseWheel,false);
31     }
32   window.onmousewheel=document.onmousewheel=MouseWheel;//IE/Opera/Chrome
33 </script>
34 
35 </head>
36 <body>
37 <img src="img/Shop_Isle_9-300x300.jpg"  id="img1">
38 <img src="img/Shop_Isle_6-300x300.jpg" id="img2" style="display:none;">
39 <img src="img/Shop_Isle_7-300x300.jpg"  id="img3" style="display:none;">
40 </body>
41 </html>

編者按

　　但願今天講的幾個圖片循環切換的小方法能對你們作網站有所幫助，增長網站上視覺亮點。也但願你們跟小編同樣，繼續一步一步的學習，在前端路上越走越遠。

相關標籤/搜索

每日一句

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