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


Posted in Javascript onJanuary 19, 2016

本文实例介绍了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程序设计有所帮助。

Javascript 相关文章推荐
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
在jQuery中 关于json空对象筛选替换
Apr 15 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
javascript中clone对象详解
Dec 03 Javascript
JS Attribute属性操作详解
May 19 Javascript
老生常谈的跨域处理
Jan 11 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
vue服务端渲染缓存应用详解
Sep 12 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
Jul 10 Javascript
jQuery设置下拉框显示与隐藏效果的方法分析
Sep 15 jQuery
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 #Javascript
学习JavaScript设计模式之享元模式
Jan 18 #Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 #Javascript
学习JavaScript设计模式之责任链模式
Jan 18 #Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 #Javascript
深入学习jQuery Validate表单验证
Jan 18 #Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 #Javascript
You might like
MySQL中create table语句的基本语法是
2007/01/15 PHP
使用淘宝IP库获取用户ip地理位置
2013/10/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
微信通过页面(H5)直接打开本地app的解决方法
2017/09/09 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
vue实现底部菜单功能
2018/07/24 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
VUE 实现复制内容到剪贴板的两种方法
2019/04/24 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
JavaScript 判断数据类型的4种方法
2020/09/11 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
用python实现的去除win下文本文件头部BOM的代码
2013/02/10 Python
python+django加载静态网页模板解析
2017/12/12 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
Python3之不使用第三方变量,实现交换两个变量的值
2019/06/26 Python
python下载库的步骤方法
2019/10/12 Python
使用python turtle画高达
2020/01/19 Python
Pygame的程序开始示例代码
2020/05/07 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
2016/06/20 HTML / CSS
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
村党支部公开承诺书
2014/05/29 职场文书
消防志愿者活动方案
2014/08/23 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
滴水洞导游词
2015/02/10 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
暑期社会实践新闻稿
2015/07/17 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书