今天我们主要讲讲如何使用原生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>
| 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>
| 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>
编者按
希望今天讲的几个图片循环切换的小方法能对大家做网站有所帮助，增加网站上视觉亮点。也希望大家跟小编一样，继续一步一步的学习，在前端路上越走越远。