原生JS实现图片轮播与淡入效果的简单实例


Posted in Javascript onAugust 21, 2016

最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js。然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果。以后学习的路很长,希望自己在前端的路上越走越远`(∩_∩)′

从原理来讲,网上的教程有很多,简单来说。


淡入淡出,其实这里只用到了淡入的效果。每一张淡入的图片,我们将它的display设置为block,其他为none,所以实际存在并且在文档流占位置的只有一张图片。在设置图片的display方式之前,将图片的透明度逐渐增大,就会给人一种淡入的感觉。

其实在js代码中,还有关键的一点,代码中用到了闭包,因此,才对闭包有了一点点认识。在这里多说几句吧:

闭包的官方”的解释是:闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。

比较简单的说法是:

当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包。

说的更透彻一些。所谓“闭包”,就是在构造函数体内定义另外的函数作为目标对象的方法函数,而这个对象的方法函数反过来引用外层函数体中的临时变量。这使得只要目标对象在生存期内始终能保持其方法,就能间接保持原构造函数体当时用到的临时变量值。

尽管最开始的构造函数调用已经结束,临时变量的名称也都消失了,但在目标对象的方法内却始终能引用到该变量的值,而且该值只能通这种方法来访问。即使再次调用相同的构造函数,但只会生成新对象和方法,新的临时变量只是对应新的值,和上次那次调用的是各自独立的。

下面这个函数就是一个闭包函数。为什么要用闭包?普通函数不可以吗?真的是不可以。这里闭包的作用是保持对flag的引用。如果不用闭包,对于局部变量来说,只要函数执行了一次,也就是flag执行了一次,这个局部变量就会被垃圾回收机制回收清理掉,而我们通过间歇调用中的函数引用flag变量,在第二次执行的时候,flag就会失去它的值,函数体无法执行正确的结果了。在开始接触前端的时候,觉得闭包可有可无,事实是,这东西真的很重要!

var setVal = function(s, flag)
    {
      return function()
      {
        pos = Math.abs(parseInt(pic.style[point]));
        if(flag > 0){   //当前点大于目标点坐标,画面向右移动,left值减小
          pic.style[point] =-Math.floor(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px';
        }
        if(flag < 0) {
          pic.style[point] =-Math.ceil(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px';
        }
        if(pos == (sSingleSize * s))
        {
          now = s;
          clearInterval(interval);
        }
      }
    };

下面是代码:

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>picsGlide</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

<script src="js/index.js"></script>
</head>
<body onLoad="init()">
<div id = "picBox">
  <ul class = "show_pic" style = "left: 0">
    <li class = "on"><a href="#"><img src="imgs/ccc.jpg" alt="" title="" /></a></li>
    <li><img src="imgs/aaa.jpg" alt="" title="" /></li>
    <li><img src="imgs/bbb.jpg" alt="" title="" /></li>
    <li><img src="imgs/ccc.jpg" alt="" title="" /></li>
    <li><img src="imgs/ccc.jpg" alt="" title="" /></li>
  </ul>
  <div class = "bg"></div> 
  <ul class = "show_des">
    <li class="on">puss in boots1</li> 
    <li>puss in boots2</li> 
    <li>puss in boots3</li> 
    <li>puss in boots4</li> 
    <li>puss in boots5</li> 
  </ul> 
  <ul class = "icon_num">
    <li class = "on" >1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
</div>

</body>
</html>

css

body {font-size: 12px; 
}
ul, li {
  padding: 0;
  margin: 0;
  list-style: none; 
}
#picBox {
  width: 610px; 
  height: 205px; 
  margin: 50px auto; 
  overflow: hidden; 
  position: relative;
  font-size: 0;
}
/*轮播图片*/
#picBox .show_pic {
  width: 3050px;
  position: absolute;
}
#picBox .show_pic li {
  float: left; 
  width: 610px; 
  height: 205px;
  display: none;
  /*display: none;
*/
}
#picBox .show_pic li.on { 
  display: block;
}
#picBox .show_pic li img { 
  display: block;
  width: 610px;
  height: 205px;
}
#picBox .icon_num {
  position: absolute;
  bottom: 12px; 
  right: 10px;
  z-index: 10;

}
#picBox .icon_num li { 
  float: left; 
  /*background: url(/uploadfile/200912/28/FA15567738.gif) no-repeat -15px 0;
  */
  width: 16px; 
  height: 16px;
  font-size: 16px; 
  color: #39F; 
  text-align: center; 
  cursor: pointer; 
  margin-right: 5px;
}

#picBox .icon_num li.on {
  background: #000;
  opacity: 0.5; 
}
/*背景*/
.bg {
  z-index: 1;
  position: absolute;
  bottom: 0;
  height: 40px;
  width: 610px;
  background: #000;
  opacity: 0.6;
  filter: alpha(opacity = 60);
}
#picBox .show_des {
  width: 300px;
  height: 18px;
  position: absolute;
  bottom: 11px;
  left: 15px;
  color: #fff;
  z-index: 10;
}
#picBox .show_des li {
  display: none;
  line-height: 18px;
  font-size: 18px;
}
#picBox .show_des li.on { 
  display: block;
}

js

function cleanWhitespace(oEelement)
  {
    for(var i=0;i<oEelement.childNodes.length;i++){
      var node=oEelement.childNodes[i];
      if(node.nodeType==3 && !/\S/.test(node.nodeValue))
      {
        node.parentNode.removeChild(node);
      }
    }
  }
  //轮播代码
  this.layerGlide=function(auto,oBox,sSingleSize,second,fSpeed,point)
  {
    var interval,timeout;    //两个定时器
    var pos;           //当前定位坐标整形的绝对值
    var time = second, now = 0;    //time图片移动一次时间间隔, now当前图片的index值
    var speed = fSpeed      //移动速度
    var delay = second * 1000;  //每次切换图片的时间间隔

    var picBox = document.getElementById(oBox);
    cleanWhitespace(picBox);
    var pic = picBox.childNodes[0]; //图片列表
    var des = picBox.childNodes[2].getElementsByTagName("li"); //图片列表
    var con = picBox.childNodes[3].getElementsByTagName("li");
    var sum = con.length;
    var setVal = function(s, flag)
    {
      return function()
      {
        pos = Math.abs(parseInt(pic.style[point]));
        if(flag > 0){   //当前点大于目标点坐标,画面向右移动,left值减小
          pic.style[point] =-Math.floor(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px';
        }
        if(flag < 0) {
          pic.style[point] =-Math.ceil(pos+(parseInt(s*sSingleSize) - pos)*speed) +'px';
        }
        if(pos == (sSingleSize * s))
        {
          now = s;
          clearInterval(interval);
        }
      }
    };
    var changeTo = function(num) {
      for(var i=0; i<sum; i++)
      {
        con[i].className = "";
        des[i].className = ""; 
      };
      con[num].className = "on";
      des[num].className = "on";
      var flag = Math.abs(parseInt(pic.style[point]))-sSingleSize * num ;
      interval = setInterval(setVal(num, flag), time);
      //bkg.hide().fadeIn();
    } 
    function autoGlide()
    {
      clearTimeout(interval);
      now = (now == (parseInt(sum)-1) )? 0: (now + 1);
      changeTo(now);
      timeout = setTimeout(autoGlide,delay);
    }
    function isAuto() {
      if(auto) {
        timeout = setTimeout(autoGlide,delay);
      };
    }
    isAuto();  //开始自动轮播
    for(var i=0; i<sum; i++)  //导航按钮
    {
      con[i].onmouseover = (function(i)
      {
        return function()
        {
          clearTimeout(timeout);
          clearInterval(interval);
          changeTo(i);
          this.onmouseout=isAuto();
        }
      })(i)
    }
  }
  //淡入淡出
  this.layerFader=function(auto, oBox, second, count, speed)
  {
    var interval,timeout;    //两个定时器
    var now = 0;    //time图片移动一次时间间隔, now当前图片的index值
    var delay = second * 1000;  //每次切换图片的时间间隔

    var picBox = document.getElementById(oBox);
    cleanWhitespace(picBox);
    var pic = picBox.childNodes[0].getElementsByTagName("li");
    var des = picBox.childNodes[2].getElementsByTagName("li"); 
    var con = picBox.childNodes[3].getElementsByTagName("li");
    var sum = con.length;

    function fadeIn(elem){  
      setOpacity(elem,0); //初始全透明
      for(var i = 0;i<=count;i++){ //透明度改变 20 * 5 = 100   
        (function(i){    
           var level = i * 5; //透明度每次变化值   
           setTimeout(function(){     
             setOpacity(elem, level)    
           },i*speed); 
         })(i);   
      } 
    }  
    function setOpacity(elem, level) {  //设置透明度 
      if (elem.filters) {
        elem.style.filter = "alpha(opacity=" + level + ")";
      } else {
        elem.style.opacity = level / 100;
      }
    }
    var changeTo = function(num) {
      for(var i=0; i<sum; i++)
      {
        con[i].className = "";
        des[i].className = ""; 
        pic[i].className = "";
      };
      fadeIn(pic[num]);
      con[num].className = "on";
      des[num].className = "on";
      pic[num].className = "on";
      //bkg.hide().fadeIn();
    } 
    function autoGlide()
    {
      clearTimeout(interval);
      now = (now == (parseInt(sum)-1) )? 0: (now + 1);
      changeTo(now);
      timeout = setTimeout(autoGlide,delay);
    }
    function isAuto() {
      if(auto) {
        timeout = setTimeout(autoGlide,delay);
      };
    }
    isAuto();  //开始自动轮播
    for(var i=0; i<sum; i++)  //导航按钮
    {
      con[i].onmouseover = (function(i)
      {
        return function()
        {
          clearTimeout(timeout);
          //clearInterval(interval);
          changeTo(i);
          this.onmouseout=isAuto();
        }
      })(i)
    }
  }

jquery相对于js就简单了很多,这里就不赘述了。大三的时候上设计模式课,老师告诉我们针对接口而不是针对实现编程,代码中尽量不要出现常量,提高代码的复用性,所以写代码的时候,把可变的因素都提到了参数中。最后一句,对于js的DOM操作,js原生是王道,多用多练,才能掌握的好,希望以后越走越远。

以上这篇原生JS实现图片轮播与淡入效果的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery与其它库冲突的解决方法
Jun 25 Javascript
jquery 元素相对定位代码
Oct 15 Javascript
jQuery修改class属性和CSS样式整理
Jan 30 Javascript
学习JavaScript设计模式之模板方法模式
Jan 20 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
JavaScript仿微博发布信息案例
Nov 16 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
Feb 15 Javascript
vue-cli配置flexible过程详解
Jul 04 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 #Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 #Javascript
JSONP和批量操作功能的实现方法
Aug 21 #Javascript
全面解析标签页的切换方式
Aug 21 #Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 #Javascript
JS实现图片局部放大或缩小的方法
Aug 20 #Javascript
JS获取及验证开始结束日期的方法
Aug 20 #Javascript
You might like
解析php中mysql_connect与mysql_pconncet的区别详解
2013/05/15 PHP
PHP 只允许指定IP访问(允许*号通配符过滤IP)
2014/07/08 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
Js的MessageBox
2006/12/03 Javascript
JavaScript面向对象编程
2008/03/02 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
2013/12/31 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
学习javascript面向对象 实例讲解面向对象选项卡
2016/01/04 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
2016/01/18 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
bootstrap轮播模板使用方法详解
2017/11/17 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
vue keep-alive的简单总结
2021/01/25 Vue.js
详解JavaScript中的this指向问题
2021/02/05 Javascript
Python实现获取操作系统版本信息方法
2015/04/08 Python
利用python批量检查网站的可用性
2016/09/09 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
Python根据字符串调用函数过程解析
2020/11/05 Python
python 实现逻辑回归
2020/12/30 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
《大作家的小老师》教学反思
2014/04/16 职场文书
交通事故协议书范文
2014/10/23 职场文书
项目安全员岗位职责
2015/02/15 职场文书
入党个人总结范文
2015/03/02 职场文书
七一活动主持词
2015/06/29 职场文书
酒店宣传语大全
2015/07/13 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书