原生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>

编者按

　　但愿今天讲的几个图片循环切换的小方法能对你们作网站有所帮助，增长网站上视觉亮点。也但愿你们跟小编同样，继续一步一步的学习，在前端路上越走越远。