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 相关文章推荐
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
解javascript 混淆加密收藏
Jan 16 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
详解javascript的变量与标识符
Jan 04 Javascript
js将json格式的对象拼接成复杂的url参数方法
May 25 Javascript
JS实现重新加载当前页面或者父页面的几种方法
Nov 30 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
Mar 07 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
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
PHP读取大文件的类SplFileObject使用介绍
2014/04/09 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
document.getElementById方法在Firefox与IE中的区别
2010/05/18 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
2013/12/31 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
jquery获取checkbox的值并post提交
2015/01/14 Javascript
Highcharts学习之坐标轴
2016/08/02 Javascript
微信小程序 倒计时组件实现代码
2016/10/24 Javascript
jquery 追加元素append、prepend、before、after用法与区别分析
2016/12/02 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
React Native 通告消息竖向轮播组件的封装
2020/08/25 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
2020/04/03 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python检测lvs real server状态
2014/01/22 Python
python网络编程学习笔记(九):数据库客户端 DB-API
2014/06/09 Python
Python实现Linux下守护进程的编写方法
2014/08/22 Python
Django框架ORM数据库操作实例详解
2019/11/07 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
海外淘书首选:AbeBooks
2017/07/31 全球购物
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
自荐信结尾
2013/10/27 职场文书
酒店总经理工作职责
2013/12/13 职场文书
培训讲师邀请函
2014/01/10 职场文书
简历里的自我评价
2014/01/31 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
个人年终总结范文
2015/03/09 职场文书
餐馆开业致辞
2015/08/01 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python