JS 图片轮换封装中处理时钟

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_30410119

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量81

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/trance/archive/2009/09/25/1573784.html

本文介绍了一种使用JavaScript实现图片轮换的方法，通过DOM操作完成自动轮换和暂停等功能，并提供了具体实现代码及DEMO地址。

图片轮换是各个网站几乎最常见的效果了，用javascript操作DOM元素的方式，具有和页面无缝结合，无须加载FLASH插件，方便更新等优点，所以被广泛应用。

虽然形式各异，但是究其主要原理无非是在固定区域轮换显示不容内容，可以实现鼠标点播，自动轮换和暂停轮换等，所以今天用js写的这个东西也是按照这个思路去实现，其功能包括初始化交互处理步进程序自动轮换暂停。

点此查看
在封装中处理时钟的时候遇到点问题，多方搜索无果，最后在JS牛人argb ( argb@live.cn)的指导下采用bind函数解决，既然没有人说方法，在此就说一下，希望对有同样疑惑的同仁有所帮助。代码如下：

var bind = function (object, fn){
         return function (){
            fn.apply(object, arguments);
        }
    }
// 封装中处理时：

auto: function (){
             if ( ! this .itv){
                 this .itv = window.setInterval(bind( this , this .step), this .time);
            }
        }

程序所有代码如下（也可查看DEMO源码）：

javascript 幻灯片代码
var bind = function(object, fn){
        return function(){
            fn.apply(object, arguments);
        }
    }

    function fcs(id,time){
        return new fcs.prototype.init(id,time);
    }
    fcs.prototype={
        init:function(id,time){
            var othis=this;
            this.idx=0;
            this.itv=false;
            this.time=time || 3000;
            this.ppt=document.getElementById(id);
            this.mpc=this.ppt.getElementsByTagName("div")[0];
            this.mpcdiv=this.mpc.getElementsByTagName("div");
            this.mpclen=this.mpcdiv.length;
            this.mpcimg=this.mpc.getElementsByTagName("img");
            this.ul=document.createElement("ul");
            this.h2=this.ppt.getElementsByTagName("h2")[0];
            for(var i=0; i<this.mpclen; i++){
                this.ul.innerHTML+="<li>"+(i+1)+"<\/li>";
            }
            this.mpc.appendChild(this.ul);
            this.li=this.ul.getElementsByTagName("li");
            this.hdlr();
        },
        hdlr:function(){
            this.play();
            this.auto();
            var othis=this;
            for(var i=0; i<this.mpclen; i++){
            (function(){
                var ii=i;
                othis.li[ii]["onclick"]=function(){
                    othis.idx=ii;
                    othis.play();
                }
                })()
            }
            this.ppt.onmouseover=function(){ othis.pause() }
            this.ppt.onmouseout=function(){ othis.auto() }
        },
        play:function(){
            for(var i=0; i<this.mpclen; i++){
                if(i!==this.idx){
                    this.mpcdiv[i].style.display="none";
                    this.li[i].className="";
                    }else{
                    this.mpcdiv[i].style.display="";
                    this.li[i].className="cur";
                    this.h2.innerHTML=this.mpcimg[i].getAttribute("alt");
                }
            }
        },
        step:function(){
            this.idx+=1;
            //alert(this.idx)
            if(this.idx==this.mpclen) this.idx=0;
            this.play();
        },
        auto:function(){
            if(!this.itv){
                this.itv=window.setInterval(bind(this,this.step),this.time);
            }
        },
        pause:function(){
            var othis=this;
            if(othis.itv){
            window.clearInterval(othis.itv);
            othis.itv=false;
            }
        }
    }
    fcs.prototype.init.prototype=fcs.prototype;
    //实例化可以传进两个参数第一个为id 第二个为可选的时间间隔
    fcs("ppt");
    fcs("ppt2",5000);
    fcs("ppt3");
    fcs("ppt4");

最后说明一下：这个小程序只是实现了一个原形，想要各种效果的话可以自己重写 play 函数其他一些相关的效果可见如下：

http://sports.titan24.com/athletics/ 有本例的jquery插件版本

DEMO 地址：http://nba.titan24.com/focus/kikx/ABCnews.html

DEMO 地址：http://nba.titan24.com/focus/kikx/fun.html

DEMO地址： http://nba.titan24.com/focus/kikx/cycledemo.html

DEMO地址：http://nba.titan24.com/focus/kikx/wowdemo.html

转载于:https://www.cnblogs.com/trance/archive/2009/09/25/1573784.html