原生JS—实现图片循环切换及监测鼠标滚动切换图片

时间:2022-06-12 20:27:34

今天我们主要讲讲如何使用原生JS实现图片的循环切换的方法以及如何检测鼠标滚动循环切换图片。多余的话我们就不多说了,我们一个一个开始讲吧。

 

1  原生JS实现图片循环切换 —— 方法一

 

在上栗子之前我们先简单介绍一下所用的一些知识点。首先是——JS中的数组,什么是数组呢?其实数组就是在内存空间中连续存储有序数据的结合,元素在数组中的顺序,成为下标,可以使用下标访问数组的每个元素。我们声明数组有如下方式:

1、使用字面量申明:var arr=[ ];

2、在JS中,同一数组,可以存储各种数据类型,直接将数据存储在数组中

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

3、使用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>

 

 


       
原生JS—实现图片循环切换及监测鼠标滚动切换图片

 

 

 

2  原生JS实现图片循环切换 —— 方法二

 

接着我们说说使用原生JS实现图片循环切换的第二种方法。

首先我们还是先讲讲所使用的到知识——JS中的循环,JS中有很多种循环方式,我们今天主要讲讲JS中的for循环。

1、for循环有三个表达式:
    申明循环变量
    判断循环条件
    更新循环变量
   三个表达式之间用分号分隔,三个表达式可以省略,但是两个分号缺一不可。
  3、for循环执行特点:先判断,再执行,与while相同。
  4、for循环三个表达式都可以有多部分组成;第二部分多个判断条件用&& ||链接,第一三部分用逗号分隔;

讲到循环了,我们顺便说说——break和continue。

1、break:跳出本层循环,继续执行循环后面的语句。
       如果有多层嵌套,则只跳出一层。
 2、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>

 

 

原生JS—实现图片循环切换及监测鼠标滚动切换图片

 

 

 

3  监测鼠标滚动切换图片

 

使用JS判断鼠标滚动是向上还是向下滚动。监测鼠标对不同浏览器有不同判断方法。当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时(无论向下还是向上),就会触发mousewheel事件。当用于向前滚动鼠标滚轮是,wheelDelta是120的倍数;当用户向后滚动鼠标滚轮是,wheelDelta是-120的倍数。判断滚轮向上或向下需要考虑浏览器的兼容性,对于现在的浏览器,包括(IE、Opera、Safari、Firefox、Chrome),其中Firefox 使用detail,其余的几个浏览器使用wheelDelta。两者只在取值上不一致,detail与wheelDelta只各取两个 值,detail只取±3,wheelDelta只取±120,其中正数表示为向上,负数表示向下。火狐向下滑动为正,向上为负,与其他的几个浏览器正好相反。

 

1、判断浏览器IE,谷歌滑轮事件

 

1 if (e.wheelDelta) {  //判断浏览器IE,谷歌滑轮事件               
2             if (e.wheelDelta > 0) { //当滑轮向上滚动时  
3                 alert("滑轮向上滚动");  
4             }  
5             if (e.wheelDelta < 0) { //当滑轮向下滚动时  
6  alert("滑轮向下滚动");  
7             }  
8         } 

 

2、判断浏览器Firefox滑轮事件 。

 

1 if (e.detail) {  //Firefox滑轮事件  
2             if (e.detail> 0) { //当滑轮向上滚动时  
3                 alert("滑轮向上滚动");  
4             }  
5             if (e.detail< 0) { //当滑轮向下滚动时  
6                 alert("滑轮向下滚动");  
7             }  
8  }  

 

3、给页面绑定滑轮滚动事件(firefox)

 

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

 

4、滚动滑轮触发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>

 

 

原生JS—实现图片循环切换及监测鼠标滚动切换图片

 

 

 

编者按

  希望今天讲的几个图片循环切换的小方法能对大家做网站有所帮助,增加网站上视觉亮点。也希望大家跟小编一样,继续一步一步的学习,在前端路上越走越远。