js图片轮播简单代码

最新推荐文章于 2024-05-17 03:12:00 发布

软件-攻城狮

最新推荐文章于 2024-05-17 03:12:00 发布

阅读量1.5k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/smshuxue/article/details/18972235

版权

JavaScript 专栏收录该内容

67 篇文章 0 订阅

订阅专栏

一个较简单的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
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js图片轮播简单代码

一个较简单的js图片轮播网页特效，一张一张切换图片，就像放幻灯片一样，有渐变过渡效果。兼容IE,火狐等，图片路径定义在JavaScript代码内，请按顺序处理好所需图片，修改JS代码和CSS就可以了，美工好的自己拿去美化吧。#cnt{width:100%;height:80%;}.ctrl{text-align:center;border:1px solid gray;font-
复制链接

扫一扫