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

2024-12-13 22:26:17

最近对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;
}

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实现图片轮播与淡入效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

JS实现的简单轮播图运动效果示例

本文实例讲述了JS实现的简单轮播图运动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title&
原生JS实现图片网格式渐显、渐隐效果

先给出效果图: 写的小组件支持图片的渐显.渐隐,并且可以是有序.随机两种方式. 我采用的原型是属性写在构造函数内,方法写在原型对象内.方法写构造函数内有个问题,就是每次调用这个方法就相当于重新实例化一次,举个粟子: 实现网格效果的原理上是将读取图片的宽高,按照设定的参数,分成等高宽的网格(我用的span标签表示的网格),网格利用定位铺满整个图片,每个网格的背景图都是原图片,原理同sprite,利用background-position属性改变显示区域.接下来就是按照设定的顺序实现渐显或渐隐.渐显
原生js和jquery实现图片轮播淡入淡出效果

图片轮播有很多种方式,这里采用其中的淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法. 但不管怎样,构造一个最基本的表现层是必须的简单的图片轮播一般由几个部分构成. 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后
js学习总结_轮播图之渐隐渐现版(实例讲解)

具体代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; -webkit-user-select:none; } ul,li{ list-style } im
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

经常看到网页里图片渐变显示,自己写一个. 原理很简单就是修改元素的css透明度. 在线预览效果:http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/ 复制代码代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <
js淡入淡出的图片轮播效果代码分享

本文实例讲述了淡入淡出的js图片轮播效果代码.分享给大家供大家参考.具体如下: 运行效果图:----------------------查看效果----------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播效果代码如下 <html> <head> <title>js图片轮播效果代码</title> <style type="text/css"> table i
原生JS实现图片轮播与淡入效果的简单实例

最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在前端的路上越走越远`(∩_∩)′ 从原理来讲,网上的教程有很多,简单来说. 淡入淡出,其实这里只用到了淡入的效果.每一张淡入的图片,我们将它的display设置为block,其他为none,所以实际存在并且在文档流占位置的只有一张图片.在设置图片的display方式之前,将图片的透明度逐渐增大,就会
原生js实现图片轮播特效

本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习. 运行效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0
原生JS实现图片轮播效果

之前页面需要图片轮播的时候,都是直接在网上找一个插件,然后自己动手改一下,把图片的路径改成自己图片的路径,然后万事大吉.后来觉得这样并不能提高自己的前端水平,于是乎,自己动手写了一个图片轮播的小demo,用的是jquery,小弟前端小白一个,各位前端大神看了之后,望批评指正. 我的思路是这样的,定义两个变量,一个用来保存当前页码$index,一个用来保存上一页的页码$exdex,首先判断$index和$exdex的大小,如果$index大于$exdex,说明是朝左翻页,反之,就是朝右翻页.如果是
原生JS实现图片轮播 JS实现小广告插件

最近想用原生JS多实现一些小功能,现在写到博客里,大家可以借鉴,有问题欢迎指出. 轮播图需求: 图片循环轮播,可点击左右切换,切换状态与<li>绑定,鼠标移入图片悬停,鼠标移出图片继续循环切换. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生js轮播图片</title> </he
原生JS实现图片轮播切换效果

首先来分析一下轮播图效果的实现原理: 1.父元素作为显示窗口,大小固定超出部分隐藏,即设置overflow:hidden; 2.子元素存放图片列表用ul,ul固定定位,参照为父元素,即父元素position:relative;ul元素position:absolute; 3.一个li即一张图片的宽度为父元素的显示宽度 4.初始时,ul的left为0,这时第一张图片即第一个li显示 5.点击下一张按钮,将整个ul左移,使第二个li对齐父元素的左边框,此时ul的left为负的一个li的宽度 6.点击
js实现图片轮播切换效果

最近在b站上学习的时候,学到了一个用原生js实现图片轮播切换效果的实战,码下来收藏上图是这个小实战的效果图,整个小实战所实现的功能是图片自动轮播切换.点击上下键图片切换上下图片.点击右下角圆点切换相应图片.点击主菜单显示相应子菜单内容. html页面布局 <body>  <div id="main" class="main">  <div clas
原生JS实现的轮播图功能详解

本文实例讲述了原生JS实现的轮播图功能.分享给大家供大家参考,具体如下: 一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2..prev存放向左的箭头,.next存放向右的箭头: 3.pointer意为指示器,存放下方的五个切换按钮,每个切换按钮用span来表示: 4..m-view,意为视窗,即每次看到图片的窗口,它存放以上所有的部件: (二)CS
原生JS运动实现轮播图

原生JS运动实现轮播图 **基本原理:**通过控制包含n张图片的ul的left值来实现图片自动运动的效果,其中列表中li元素的个数为n,第一个li和最后一个li里存放的图片应为同一张图片,当图片运动到最后一张时,将ul的left值设为0,即可达到图片无线轮播的效果. 运动函数的实现函数需传入元素(即需要参与运动的元素).目标值(以对象的形式呈现,如{left: 300}).callback(回调函数). //多物体多值运动+回调机制 function startMove(dom, attrOb
js实现图片轮播效果

本文实例讲解了js实现图片轮播效果代码,分享给大家供大家参考,具体内容如下运行代码如下具体代码如下插件是基于jQuery写的,主要实现的功能:自动播放.鼠标悬停.左右箭头控制+禁止点击 CSS样式: <style> .cooperation-box { position: relative; height: 91px; border-bottom: 1px solid #E0DED9; overflow: hidden; } .cooperation { position: relati
js图片轮播手动切换效果

利用ScrollPicLeft.js这个库实现图片的前后切换,适用于网页中的证书展示.推荐商品之类的栏目.它不像传统的marquee滚动那样,而是可以手动的去点击前后切换箭头按钮,进行图片的翻页,从而达到浏览上一张,下一张的效果. 不需要调用jquery,初始化简单,使用非常的简单,便利. 实例效果: js代码: <script type="text/javascript"> var scrollPhoto = new ScrollPicleft(); scrollPhot

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

相关推荐

随机推荐