今天我们主要讲讲如何使用原生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  就是用来清除定时器。

现在我们上栗子啦！！

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title></title>

         <style type="text/css">

             #img{

                 left: -300px;

                 position: relative;

                 top:-50px

             }

         </style>

     </head>

     <body>

         <div id="div">

             <img id=obj src ="img/Shop_Isle_5-300x300.jpg" border =0 />

         </div>

     <script type="text/javascript">

         var arr=new Array();

         arr[0]="img/Shop_Isle_5-300x300.jpg";

         arr[1]="img/Shop_Isle_6-300x300.jpg";

         arr[2]="img/Shop_Isle_7-300x300.jpg";

         arr[3]="img/Shop_Isle_8-300x300.jpg";

         arr[4]="img/Shop_Isle_9-300x300.jpg";

         arr[5]="img/Shop_Isle_2-300x300.jpg";

         arr[6]="img/Shop_Isle_4-300x300.jpg";

         var curIndex=0;

         setInterval(function() {

             var obj=document.getElementById("obj");

             var img=document.getElementById("img");

             if(curIndex==arr.length - 1) {

                 curIndex=0;

             }

             else {

                 curIndex +=1;

             }

             obj.src=arr[curIndex];

             console.log(curIndex);

         },1000)

     </script>

     </body>

 </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++导致死循环。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8" />

         <title>测试</title>

         <script type="text/javascript">

             var NowImg=1;//表示当前显示的div

             var MaxImg=5;//表示div的个数

             setInterval(function(){

                 for(var i=1;i<=MaxImg;i++){

                     if(NowImg==i)

                         document.getElementById("div"+NowImg).style.display='block';//当前显示的div

                     else

                         document.getElementById("div"+i).style.display='none';

                 }

                 if(NowImg==MaxImg)//判断当前div是否是最后一个，如果是则从第一个重新轮回显示

                     NowImg=1;

                 else

                     NowImg++;//设置下一个显示的图片

             },1000)

         </script>

     </head>

     <body>

         <div>

             <div id="div1" style="display:block;"><img src="img/Shop_Isle_9-300x300.jpg" /></div>

             <div id="div2" style="display:none;"><img src="img/Shop_Isle_2-300x300.jpg" /></div>

             <div id="div3" style="display:none;"><img src="img/Shop_Isle_4-300x300.jpg" /></div>

             <div id="div4" style="display:none;"><img src="img/Shop_Isle_5-300x300.jpg" /></div>

             <div id="div5" style="display:none;"><img src="img/Shop_Isle_8-300x300.jpg" /></div>

         </div>

     <body>

 </html>

3  监测鼠标滚动切换图片

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

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

 if (e.wheelDelta) {  //判断浏览器IE，谷歌滑轮事件

             if (e.wheelDelta > 0) { //当滑轮向上滚动时

                 alert("滑轮向上滚动");

             }

             if (e.wheelDelta <) { //当滑轮向下滚动时

                 alert("滑轮向下滚动");

             }

         }

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

 if (e.detail) {  //Firefox滑轮事件

             if (e.detail> 0) { //当滑轮向上滚动时

                 alert("滑轮向上滚动");

             }

             if (e.detail<) { //当滑轮向下滚动时

                 alert("滑轮向下滚动");

7             }

8         }

3、给页面绑定滑轮滚动事件（firefox）

 if (document.addEventListener) {

         document.addEventListener('DOMMouseScroll', scrollFunc, false);

     }

4、滚动滑轮触发scrollFunc方法 （ie 谷歌）

  window.onmousewheel = document.onmousewheel = scrollFunc;

接下来讲个实例吧，让大家更加明白鼠标滚动事件的监测。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

 <script type="text/javascript">

   var img=1;

   function MouseWheel(e){

     e=e||window.event;

     for(i=1;i<4;i++){

       if(i==img){

           if(e.wheelDelta){//IE

              document.getElementById("img"+i).style.display="block";

             }else if(e.detail){//Firefox

              document.getElementById("img"+i).style.display="block";

             }

         }else{

           document.getElementById("img"+i).style.display="none";

         }

       }

       if(img==3){

         img=1;

       }else{

         img++;

       }

     }

   /*Firefox注册事件*/

   if(document.addEventListener){

       document.addEventListener("DOMMouseScroll",MouseWheel,false);

     }

   window.onmousewheel=document.onmousewheel=MouseWheel;//IE/Opera/Chrome

 </script>

 </head>

 <body>

 <img src="img/Shop_Isle_9-300x300.jpg"  id="img1">

 <img src="img/Shop_Isle_6-300x300.jpg" id="img2" style="display:none;">

 <img src="img/Shop_Isle_7-300x300.jpg"  id="img3" style="display:none;">

 </body>

 </html>

编者按

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

原生JS—实现图片循环切换及监测鼠标滚动切换图片的更多相关文章

  1. wpf图片查看器，支持鼠标滚动缩放拖拽

    最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class=&qu ...

  2. 原生JS实现各种经典网页特效——Banner图滚动、选项卡切换、广告弹窗等

    在制作网页过程中,我们可能会遇到各种常用的经典网页特效,比如Banner图片滚动.选项卡循环播放.右下角广告弹窗.评论提交展示.选项动态增删.剪刀石头布小游戏等等等...是不是感觉都见到过这些场景.那 ...

  3. 原生js开发，无依赖、轻量级的现代浏览器图片懒加载插件，适合在移动端开发使用

    优势 1.原生js开发,不依赖任何框架或库 2.支持将各种宽高不一致的图片,自动剪切成默认图片的宽高 比如说你的默认图片是一张正方形的图片,则各种宽度高度不一样的图片,自动剪切成正方形. 完美解决移动 ...

  4. js实现网页全屏切换（平滑过渡），鼠标滚动切换

    实现效果为页面平滑过渡全屏切换,点击导航和鼠标滚动都可以切换. 效果图: html代码: <!DOCTYPE html> <html> <head lang=" ...

  5. 原生js实现div拖拽+按下鼠标计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> ...

  6. 杠杠做的全屏随鼠标滚动显示图片，类似于PPT效果

    图片有22张,是一张张加载的,耐心点,鼠标一直尝试向下滚就行了. 图片来自<天空之境:乌尤尼盐沼>,一个好美好美的地方 引个流,欢迎去我的博客看看:http://blog.cxycs.co ...

  7. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  8. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  9. 原生 js基础常用的判断和循环

    原生 js基础常用的判断和循环 以下部分是个人实践及和搜集的资料: 最常用的if判断语句: if (/* 条件表达式 */){ // 成立执行语句 } else { // 否则执行语句 } 原生js的 ...

随机推荐

  1. M-移动端的webapp页面布局教程和webapp实战分析

    http://www.25xt.com/html5css3/8092.html 响应式设计 1 媒体查询 适用于不同固定宽度设计 媒体类型 : screen 屏幕 print 打印机 handheld ...

  2. django集成celery之callback方式link_error和on_failure

    在使用django集成celery进行了异步调度任务之后,如果想对失败的任务进行跟踪或者告警,怎么做? 这里提供一个亲测的方法. 1.任务callback 假如你想在任务执行失败的时候,打印错误信息并 ...

  3. C#常用的字符串处理方法

    1.Replace(替换字符):public string Replace(char oldChar,char newChar);在对象中寻找oldChar,如果寻找到,就用newChar将oldCh ...

  4. 《SQL必知必会》学习笔记二)

    <SQL必知必会>学习笔记(二) 咱们接着上一篇的内容继续.这一篇主要回顾子查询,联合查询,复制表这三类内容. 上一部分基本上都是简单的Select查询,即从单个数据库表中检索数据的单条语 ...

  5. win10 UWP MessageDialog 和 ContentDialog

    我之前开发一个软件 winMarkdown,这个软件在关闭需要提示用户还没有保存东西,需要保存,如果用户选择退出,那么把数据存放. 在Metro程序中,没有传统的窗口,当我们要用需要交互的消息提示时, ...

  6. Windows-universal-samples-master示例 XamlCommanding

    Windows-universal-samples-master XamlCommanding 运行默认如果是 ARM会出现没有引用System,只要在调试选择CPU为PC的就好 默认 选择PC平台 ...

  7. OpenWRT添加模块 Makefile和Config.in

    添加模块编译 在网上找了一下,很多关于编译Openwrt系统的资料,不过这些事情芯片厂商提供的开发包都已经办得妥妥了,但是没有找到系统介绍的资料,添加一个包的介绍有不多,其中有两个很有参考价值: ht ...

  8. 容斥原理、欧拉函数、phi

    容斥原理: 直接摘用百度词条: 也可表示为 设S为有限集, ,则 两个集合的容斥关系公式:A∪B = A+B - A∩B (∩:重合的部分) 三个集合的容斥关系公式:A∪B∪C = A+B+C - A ...

  9. Debian GNU/Linux 8.4 (jessie)编译安装php.md

    编译遇到的问题很多.网上的文章往往是记录遇到的报错,贴上对应的解决. 而实际的环境,如操作系统,安装的软件必然有差异,所以,更重要的是,如何找到解决方法(不担保按步骤做可以编译成功),并将过程自动化. ...

  10. C++参数传递(01)

    *是取值运算符,对地址使用可以获得地址中储存的数值:对于指针a,*a表示取a中的值 &是地址运算符,对变量使用可以获得该变量的地址. 对于变量b,*b表示取b的地址 别名(引用):主要用于做函 ...