一个js特效滚动广告播放器

呵呵，这个是使用mootools类库实现的特效了，mootools也是基于prototype.js发展起来的个性特效类库了。一开始觉得效果很玄，后来才发现，完成的plugin插件实现特效数量有限，于是就自己硬着头皮开发了一个，用了两天时候，头皮都磨破了
mootools 下载带注释版的有146K大小，压缩版pack ver 只有36.7k大小。学习的时候可以使用full，上传到web的时候可以使用pack
mootorial 这是mootool的客户端教程，很详细的哦。其实有很多方法和prototype差不多的了。就当作是ajax入门吧
可惜的是csdn,没有运行代码可以调试了
shifter.js

//  JavaScript Document
var  shifter  =   new  Class( ... {
    getOptions: function()...{
        return ...{
            onChange: Class.empty,
            onComplete: Class.empty,
            onTick: function(pos)...{
                this.knob.setStyle(this.p, pos+'px');
            },
            steps: 100
        };
    },
    initialize: function(el, options)...{

        previousBtn=$("prev-button");
        nextBtn=$("next-button");
        pauseBtn=$("pause-button");
        //获取前一个按钮，下一个按钮，已经暂停按钮，分别绑定 leftClick rightClick toggle开关事件
        this.playState = true;
        //设置自动播放
        this.nodes = el.getElementsByTagName("div");
        this.steps = this.nodes[0].getStyle('width').toInt();
        //获取步长值
        this.leng = this.nodes.length-1; 
        //获取滚动的次数
        this.count = 0;
        //计数器，计算已经滚动多少次了
        this.isRight = true;
        //方向是否向右
        this.elements = el;
        
        
        var shifter_copy = new Element("div");
        var shifter_left = new Element("div");        
        shifter_copy.addClass("shifter");
        shifter_left.addClass("shifter-left");
        shifter_copy.innerHTML = el.innerHTML;
        shifter_left.innerHTML = el.innerHTML;
        shifter_copy.injectAfter(el);
        shifter_left.injectBefore(el);
        //首先初始化了前后两个对象，以方便左右滚动，如果一开始时向左滚动的话，那么左边可能没有元素，所以需要
        //shifter-left来弥补一下
        nextBtn.addEvent('click',this.rightClick.bind(this));
        previousBtn.addEvent('click',this.leftClick.bind(this));
        pauseBtn.addEvent('click',this.toggle.bind(this));
    },
    go:function(index)
    ...{
        parent = this.elements.getParent();        
        if(index<-this.leng||index>this.leng)
        ...{
            this.count=index=0;
            parent.setStyle('margin-left', '0px');
        }
        originLeft = parent.getStyle("margin-left");
        if(this.isRight)
        ...{
            destinLeft = originLeft.toInt() - this.steps + "px";
            this.count--;
        }
        else
        ...{
            destinLeft = originLeft.toInt() + this.steps + "px";
            this.count++;
        }

        this.myFx = new Fx.Style(parent, 'margin-left');
        this.myFx.start(originLeft,destinLeft);
    },
    start:function() ...{
        if (this.playState)    ...{
            me = this;
            this.timer = window.setInterval(function()...{me.go(me.count);},3000);
        }
    },
    toggle:function() ...{
        me = this;
        
        if (!this.playState) ...{
            me.go(me.count);
            this.timer = window.setInterval(function()...{me.go(me.count);},3000);
            //pauseBtn.innerHTML.replace(/off./g,'on.');
        }
        else...{
            $clear(this.timer);
            //pauseBtn.innerHTML.replace(/on./g,'off.');
        }
        this.playState = (this.playState)?false:true;
    },
    rightClick:function()
    ...{
        $clear(this.timer);
        this.playState = false;
        this.isRight = true;
        //pauseBtn.innerHTML.replace(/on./g,'off.');  //把图片从暂定转换成播放,pause-off表示播放,pause-on暂停
        this.go(this.count);
    },
    leftClick:function()
    ...{
        $clear(this.timer);
        this.playState = false;
        this.isRight = false;
        //pauseBtn.innerHTML.replace(/on./g,'off.');  //把图片从暂定转换成播放,pause-off表示播放,pause-on暂停
        this.go(this.count);
    }
    
} );

这里是html部分

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > 新闻滚动 </ title >
< style  type ="text/css" > ...
/**//* <![CDATA[ */
*
{...}{
    margin:0;
    padding:0;
}
html,body
{...}{
    height:100%;
    width:100%;
}
.clearBoth
{...}{
    clear:both;
}
div.layout
{...}{
    width:600px;
    overflow:hidden;
    /**//*overflow:auto;*/
}
.shifter-wrapper
{...}{
    width:4000px;
}
div.shifter,div.shifter-left
{...}{
    width:2000px;
    height:130px;
    float:left;
    overflow:hidden;
    background:#AAAAAA;
}
div.shifter-left
{...}{
    margin-left:-2000px;
}
div.blocksub
{...}{
    width:200px;
    height:100%;
    float:left;
    background:#FFFFCC;
}
/**//*  ]]>  */
</ style >
< script  type ="text/javascript"  src ="../mootools/mootools.v1.00.js" ></ script >
< script  type ="text/javascript"  src ="js/shifter.js" ></ script >
</ head >

< body >
< div  class ="layout"  id ="layout" >
     < div  class ="shifter-wrapper"  id ="shifter-wrapper" >
         < div  id ="shifter"  class ="shifter" >
           < div  class ="blocksub"  id ="block1" >< a  href ="#block6" > 1 </ a ></ div >
           < div  class ="blocksub" >< a  href ="#block7" > 2 </ a ></ div >
           < div  class ="blocksub" >< a  href ="#block8" > 3 </ a ></ div >
           < div  class ="blocksub" >< a  href ="#block9" > 4 </ a ></ div >
           < div  class ="blocksub" >< a  href ="#block10" > 5 </ a ></ div >
           < div  class ="blocksub" >< a  href ="#block1" > 6 </ a ></ div >
           < div  class ="blocksub" >< a  href ="#block2" > 7 </ a ></ div >
           < div  class ="blocksub" >< a  href ="#block3" > 8 </ a ></ div >
           < div  class ="blocksub" >< a  href ="#block4" > 9 </ a ></ div >
           < div  class ="blocksub" >< a  href ="#block5" > 10 </ a ></ div >       
         </ div >
     </ div >
    
</ div >
<!-- <a href="#" οnclick="go(0);return false;">1</a>
<a href="#" οnclick="go(1);return false;">2</a>
<a href="#" οnclick="go(2);return false;">3</a>
<a href="#" οnclick="go(3);return false;">4</a>
<a href="#" οnclick="go(4);return false;">5</a>
<a href="#" οnclick="go(5);return false;">6</a>
<a href="#" οnclick="go(6);return false;">7</a>
<a href="#" οnclick="go(7);return false;">8</a>
<a href="#" οnclick="go(8);return false;">9</a>
<a href="#" οnclick="go(9);return false;">10</a> -->
< a  href ="#"  id ="prev-button"  class ="prev-button"  onclick ="return false;" > 上一个 </ a >
< a  href ="#"  id ="pause-button"  class ="pause-button"  onclick ="return false;" > 暂停|播放 </ a >
< a  href ="#"  id ="next-button"  class ="next-button"  onclick ="return false;" > 下一个 </ a >
< script  type ="text/javascript" > ...  
/**//* <![CDATA[ */
/**//*var myad = new shifter($('shifter'));
window.addEvent('domready', function(){    
    myad.start();
});*/

/**//*  ]]>  */
</ script >
</ body >
</ html >

shifter_pack.js

var  shifter= new  Class( ... {initialize:function(el,options)...{previousBtn=$("prev-button");nextBtn=$("next-button");
pauseBtn=$("pause-button");this.playState=true;this.nodes=el.getElementsByTagName("div");this.steps=t
his.nodes[0].getStyle('width').toInt();this.leng=this.nodes.length-1;this.count=0;this.isRight=true;
this.elements=el;var shifter_copy=new Element("div");var shifter_left=new Element("div");
shifter_copy.addClass("shifter");shifter_left.addClass("shifter-left");shifter_copy.innerHTML=el.innerHTML;
shifter_left.innerHTML=el.innerHTML;shifter_copy.injectAfter(el);shifter_left.injectBefore(el);
nextBtn.addEvent('click',this.rightClick.bind(this));previousBtn.addEvent('click',this.leftClick.bind(this));
pauseBtn.addEvent('click',this.toggle.bind(this))},go:function(index)...{parent=this.elements.getParent();
if(index<-this.leng||index>this.leng)...{this.count=index=0;parent.setStyle('margin-left','0px')}
originLeft=parent.getStyle("margin-left");if(this.isRight)...{destinLeft=originLeft.toInt()-this.steps+"px";
this.count--}else...{destinLeft=originLeft.toInt()+this.steps+"px";this.count++}
this.myFx=new Fx.Style(parent,'margin-left');this.myFx.start(originLeft,destinLeft)},start:function()...
{if(this.playState)...{me=this;this.timer=window.setInterval(function()...{me.go(me.count)},3000)}},
toggle:function()...{me=this;if(!this.playState)...{me.go(me.count);this.timer=window.setInterval(function()...
{me.go(me.count)},3000)}else...{$clear(this.timer)}this.playState=(this.playState)?false:true},
rightClick:function()...{$clear(this.timer);this.playState=false;this.isRight=true;this.go(this.count)},
leftClick:function()...{$clear(this.timer);this.playState=false;this.isRight=false;this.go(this.count)}} );
var  myad= new  shifter($('shifter'));window.addEvent('domready', function () ... {myad.start()} );