这篇文章主要介绍了 js 实现有过渡渐变效果的图片轮播相册,兼容 IE、ff,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
思路很简单,用 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>
来源: