js图片轮播简单代码

来源：互联网发布：淘宝网减肥药编辑：程序博客网时间：2024/05/22 07:08

一个较简单的js图片轮播网页特效，一张一张切换图片，就像放幻灯片一样，有渐变过渡效果。兼容IE,火狐等，图片路径定义在JavaScript代码内，请按顺序处理好所需图片，修改JS代码和CSS就可以了，美工好的自己拿去美化吧。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><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 = "/jscss/demoimg/wall" + (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>

0 0