js实现图片轮播（终结版）

 解决了一些bug，干脆就在这里面也对闭包总结了下下。

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Document</title>     <style type="text/css">          /*重置样式*/          *{margin: 0;padding: 0; list-style: none;}        /*wrap的轮播图和切换按钮样式*/          .wrap{height: 445px;width: 100%; overflow: hidden;position: relative;}        .wrap ul{position: absolute;}        .wrap ul li{height: 445px;}         .wrap ul li img {height: 445px;width: 100%;}        .wrap ol{position: absolute;right: 10px;bottom: 10px;}        .wrap ol li{height: 20px;width: 20px;  background-color:#fff;border: 1px solid #eee; margin-left: 10px;float:left; line-height: 20px; text-align: center;border-radius: 5px;}        .wrap ol li.active{background-color: gray; color: #fff; border-radius: 5px; }        .g_key img {  position: absolute;  top:165px;  cursor: pointer;  }        #g_img1 {  left: 96.5%;  }    </style>   </head> <body>     <!-- wrap包裹录播的图片以及可点击跳转的按钮 -->      <div class="wrap" id="wrap">        <ul id="pic">               <li><img id="g_image1" src="data:image/1.jpg" alt=""></li>               <li><img src="data:image/2.jpg" alt=""></li>               <li><img src="data:image/3.jpg" alt=""></li>               <li><img src="data:image/4.jpg" alt=""></li>          </ul>          <ol id="list">              <li class="active">1</li>            <li>2</li>              <li>3</li>              <li>4</li>          </ol>          <div class="g_key"><img src="data:image/a.png" id="g_img1" ><img src="data:image/b.png" id="g_img2" ></div>    </div>      <script type="text/javascript">        window.οnlοad=function () {        var wrap=document.getElementById('wrap'),            pic=document.getElementById('pic'),            list=document.getElementById('list').getElementsByTagName('li'),            index=1,//index=1避免第一张图片停留时间过长问题            timer=null;

            // 定义图片切换函数            function changeoptions(curindex){                for(var j=0;j<list.length;j++){                    list[j].className='';//循环清除之前的active样式,只给当前元素active样式                }                list[curindex].className='active';                pic.style.top=-curindex*445+'px';

            }

    function autoplay(){        changeoptions(index);        index++;        if(index>=list.length){            index=0;        }    }    timer=setInterval(autoplay,2000);//图片自动播放

     // 鼠标划过整个容器时停止自动播放      wrap.οnmοuseenter=function(){            clearInterval(timer);

        }        // 鼠标离开整个容器时继续播放至下一张    wrap.οnmοuseleave=function(){            timer=setInterval(autoplay,2000);        }

     // 遍历所有数字导航实现划过切换至对应的图片      /* for(var i=0;i<list.length;i++){         list[i].id=i;         list[i].οnmοuseοver=function(){               clearInterval(timer);               changeoptions(this.id);             }           }//在循环内使用闭包方法一：this是指循环到当前的list[i],如果this.id换位i,就只会取到循环结束的值*/

            for(var i=0;i<list.length;i++){                list[i].οnmοuseοver= (function(i) {                    return function() {                       clearInterval(timer);                        changeoptions(i);                    }                })(i)            }//在循环内使用闭包方法二：通过传递变量 i，在每个函数中都可以获取到正确的索引           /* for(var i=0;i<list.length;i++){                list[i].οnmοuseοver= (function(i) {                    return function() {                        clearInterval(timer);                        changeoptions(i);                    }                }(i))            }//在循环内使用闭包方法二：通过传递变量 i，在每个函数中都可以获取到正确的索引*/

            /*for(let i=0;i<list.length;i++){            list[i].οnmοuseοver=function(){            clearInterval(timer);            changeoptions(i);            }            }//在循环内使用闭包方法三：ES6的let语法，它会创建一个新的绑定,每个方法都是被单独调用           */

            //点击左右变换图片        var img1 = document.getElementById("g_img1");        var img2 = document.getElementById("g_img2");        img1.οnclick=function () {            clearInterval(timer);            index--;            if(index < 0){                index = 3;            }            changeoptions(index);        }        img2.οnclick=function () {            clearInterval(timer);            index++;            if(index >3){                index = 0;            }            changeoptions(index);        }        } </script> </body> </html>

转载于:https://www.cnblogs.com/iriliguo/p/6492242.html

js实现图片轮播（终结版）相关推荐

2个js实现图片轮播效果（用）
第一个(使用) 不过要注意在web.config中将该location的位置的访问权限设为allow user="*",设置了deny user="?"或&qu ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...
html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
JS实现图片轮播效果（自动和手动）
本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换 ps:由于很多同志反馈无法总有各种奇怪的情况,所以有需要的直接下载整个工程:JS ...
js动画——图片轮播
js动画--图片轮播 1.对搜索引擎友好 2.对美工友好,因为数据和代码是分开的,完全不懂js的都可以用fontpage修改动画内容可以把js代码保存为一个文件然后<script s ...
html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果图片轮播效果: 会自动向左 || 向右切换图片能手动点击按钮切换图片多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...
Zepto.js 3D图片轮播旋转插件
下载地址 Zepto.js 3D图片轮播旋转插件,基于jquery的旋转木马图片切换插件. dd:
纯js制作图片轮播效果
好久没有发博客了,最近都在复习,为了找工作做准备. 前段时间逛了下鼠绘漫画网追海贼王最新漫画,发现他们家的图片轮播效果跟其他网页的图片轮播效果效果不同,看起来更加有趣,于是我尝试了用js复写它. 前提 ...
html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
JS+Flash 图片轮播
用法力求简单,将imageShow.js加入到网页中需要进行图片轮播的地方即可,JS内容为(可在附近里面下载). var pic_width=943; //图片宽度 var pic_height=35 ...

js实现图片轮播（终结版）

js实现图片轮播（终结版）相关推荐

最新文章

热门文章