脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现有过渡渐变效果的图片轮播相册

js实现有过渡渐变效果的图片轮播相册（兼容IE,ff）

 更新时间：2016年01月19日 09:04:02   作者：xiongchao2011  
这篇文章主要介绍了js实现有过渡渐变效果的图片轮播相册，兼容IE、ff，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例介绍了js实现图片轮播相册，具有过渡渐变效果，分享给大家供大家参考，具体内容如下

思路很简单，用2个属性保存当前图片和上一张图片，用2个定时器分别控制透明度和当前过渡的图片。

<HTML> 
<HEAD> 
<TITLE></TITLE> 
</HEAD> 
<style> 
#cnt{width:100%;height:80%;} 
.ctrl{text-align:center;border:1px solid gray;font-size:12px;cursor:pointer;} 
</style> 
<script defer='defer'> 
<!-- 
  var curOpac = 0; 
  var filterTimer; 
  var isIE = /internet explorer/i.test(window.navigator.appName); 
   
  function MyScroll(cnt, control){ 
    this.data = []; // 存放图片路径 
    this.interval = 3000; // 过渡一次的间隔时间(过渡时间+图片显示时间) 
    this.timer; // 定时器：控制当前显示的图片 
    this.container = cnt; 
    this.curFrame = 0; 
    this.oldFrame = 0; 
    this.controls = control; // 按钮集合 
    Global = this;     // 获取对象的指针 
 
    this.run = function(){ 
      this.timer = window.setInterval("Global.showFrame()", this.interval); 
    } 
     
    // 按钮的处理程序 
    this.go = function(i){ 
      curOpac = 0; // 透明度归0 
      this.curFrame = i; // 当前要过渡的图片 
      this.stop(); // 清空计时器 
      this.showFrame(); // 当前图片过渡 
      this.run(); // 循环播放 
    } 
     
    this.stop = function(){ 
      window.clearInterval(this.timer); 
      window.clearInterval(filterTimer); 
    } 
 
    this.showFrame = function(){ 
      // 设置当前按钮样式 
      this.controls[this.oldFrame].style.backgroundColor = "white"; 
      this.controls[this.curFrame].style.backgroundColor = "gray"; 
 
      if(isIE) this.container.style.filter = "alpha(opacity=0)"; 
      else this.container.style.cssText = "-moz-opacity:0"; 
 
      this.container.innerHTML = this.data[this.curFrame]; 
      filterTimer = window.setInterval("blend()", 100); 
       
      this.oldFrame = this.curFrame; 
      this.curFrame ++; 
      if(this.curFrame == this.data.length){ 
        this.curFrame = 0; 
      }       
    } 
  } 
   // 增加透明度 
  function blend(){ 
    curOpac+=10; 
    if(isIE) Global.container.style.filter='alpha(opacity=' + curOpac + ')'; 
    else Global.container.style.cssText = "-moz-opacity:" + curOpac/100.0; 
 
    if(curOpac == 100){ 
      curOpac = 0; 
      window.clearInterval(filterTimer); 
    } 
  } 
  //开始 
   
  function startIt(){ 
    var imgArr = []; 
    // 创建4个图片对象保存图片路径 
    for(var i=0;i<4;i++){ 
      imgArr[i] = new Image(); 
      imgArr[i].src = "images/banner" + (i + 1) + ".jpg"; 
    } 
     
    var controlArr = $("mainTb").getElementsByTagName("span"); 
    for(var i=0;i<controlArr.length;i++){ 
      controlArr[i].tag = i; 
      controlArr[i].onclick = function(){ 
        myScroll.go(this.tag); 
      } 
    } 
 
    var myScroll = new MyScroll($("cnt"), controlArr); 
    myScroll.data.push("<img src='" + imgArr[0].src + "'>"); 
    myScroll.data.push("<img src='" + imgArr[1].src + "'>"); 
    myScroll.data.push("<img src='" + imgArr[2].src + "'>"); 
    myScroll.data.push("<img src='" + imgArr[3].src + "'>"); 
     
    myScroll.go(0); 
  } 
   
  window.onload = startIt; 
 
  function $(id){ return document.getElementById(id);} 
//--> 
</script> 
<BODY> 
<table width="300" height="100" id="mainTb"> 
  <tr> 
  <th rowspan="4"><div id="cnt"> </div></td> 
  <td width="15"><span class="ctrl"> 1 </span></td> 
  </tr> 
  <tr> 
  <td><span class="ctrl"> 2 </span></td> 
  </tr> 
  <tr> 
  <td><span class="ctrl"> 3 </span></td> 
  </tr> 
  <tr> 
  <td><span class="ctrl"> 4 </span></td> 
  </tr> 
</table> 
</BODY> 
</HTML>

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • JS简单实现滑动加载数据的方法示例

    JS简单实现滑动加载数据的方法示例

    这篇文章主要介绍了JS简单实现滑动加载数据的方法,涉及javascript事件响应及页面元素属性动态操作相关技巧,需要的朋友可以参考下
    2017-10-10
  • JS制作适用于手机和电脑的通知信息效果

    JS制作适用于手机和电脑的通知信息效果

    这篇文章主要介绍了JS制作适用于手机和电脑的通知信息效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • js时间戳格式化成日期格式的多种方法介绍

    js时间戳格式化成日期格式的多种方法介绍

    本篇文章主要介绍了js时间戳格式化成日期格式的多种方法介绍的资料,这里整理了详细的代码,有需要的小伙伴可以参考下。
    2017-02-02
  • JavaScript高级程序设计 DOM学习笔记

    JavaScript高级程序设计 DOM学习笔记

    DOM是针对XML和HTML文档的一个API：即规定了实现文本节点操控的属性、方法，具体实现由各自浏览器实现。
    2011-09-09
  • 详解webpack中的hash、chunkhash、contenthash区别

    详解webpack中的hash、chunkhash、contenthash区别

    这篇文章主要介绍了详解webpack中的hash、chunkhash、contenthash区别，详细的介绍了hash、chunkhash、contenthash的用法和区别，有兴趣的可以了解一下
    2018-01-01
  • javascript+xml技术实现分页浏览

    javascript+xml技术实现分页浏览

    基于web的技术中，分页是一个老的不能再老的，但大家津津乐道的问题，随着xml技术的日渐应用，把xml应用到分页当中，也是一种可能，当然网上的教程很多，当我都是看得稀里糊涂，索性自己写一个，与大家分享、指正。
    2008-07-07
  • 如何通过JavaScript来实现页面间数据传递

    如何通过JavaScript来实现页面间数据传递

    这篇文章主要给大家介绍了关于如何通过JavaScript来实现页面间数据传递的相关资料,在前端开发中我们常常需要从一个跳到另一个页面,并且将当前页面的数据传递过去,需要的朋友可以参考下
    2023-11-11
  • JS阻止用户多次提交示例代码

    JS阻止用户多次提交示例代码

    这篇文章主要介绍了JS如何阻止用户多次提交,需要的朋友可以参考下
    2014-03-03
  • Typescript中类型兼容的实现

    Typescript中类型兼容的实现

    在TypeScript 编程中,类型兼容是最基础的一道检查机制,一旦代码中出现类型不兼容的表达式,编译就会失败,本文主要介绍了Typescript中类型兼容的实现,感兴趣的可以了解一下
    2023-12-12
  • layui 表格的属性的显示转换方法

    layui 表格的属性的显示转换方法

    今天小编就为大家分享一篇layui 表格的属性的显示转换方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论