Javascript圖片滾動

來源:互聯網
上載者:User

     這兩天做了一個圖片滾動的效果,拿出來和大家共用。效果很簡單,不過這是我第一次使用js庫(prototype1.6)。雖然所引用的prototype檔案大小遠遠超過了自己所寫的代碼,但是這畢竟是學習而已,用js庫真的能讓代碼更簡潔。

     查看樣本

     這是第一個類,主要來負責一個SlideShow的初始化和自動播放,具有多個SlideItem執行個體,儲存在items數組中

var SlideShow = Class.create({
    //width:寬度
    //height:高度
    //btns:按鈕數組
    //content:內容
    //options:選項
    initialize:function(width,height,btns,content,options){
        var self = this;
        this.width = width;
        this.height = height;
        this.btns = btns;
        this.length = btns.length;
        this.content = content;
        this.intervalId = new Object();
        this.autoPlayTimeout = new Object();
        
        //auto:自動轉換
        //updown:上下還是左右
        //mouseType:"click"或者"mouseover"
        //autoInterval:自動播放時切換的間隔
        //bufferStep:緩動的步長 數值越大 緩動所用時間越多 一般在5-15之間
        this.options = {//prototype 1.6.0.2 ln1159
            auto:true,
            updown:false,
            mouseType:"click",
            autoInterval:3000,
            bufferStep:8,
            btnFocusHandler:null,
            btnBlurHandler:null
        }
        Object.extend(this.options,options||{});
        
        this.items = [];
        this.currentIndex = 0;
        this.btns.each(function(btn,index){
            self.items.push(new SlideItem(self,btn,index));
        });
        
        this.items[0].switchTo();
    },
    
    autoPlay:function(){
        this.autoPlayTimeout = setTimeout(autoMove,this.options.autoInterval);
        var self = this;
        function autoMove(){
            if(self.currentIndex + 1 >= self.length)
                self.items[0].switchTo();
            else
                self.items[self.currentIndex + 1].switchTo();
        }
    }
});

 

 這是第二個類,是SlideShow的一頁,主要有switchTo方法,負責轉換的具體實現

var SlideItem = Class.create({
    //slideShow:SlideShow執行個體
    //btn:按鈕
    //index:按鈕的索引
    initialize:function(slideShow,btn,index){
        this.slideShow = slideShow;
        this.btn = btn;
        this.index = index;
        
        this.position = -index * (this.slideShow.options.updown?this.slideShow.height:this.slideShow.width);
        var self = this;
        this.btn.observe(this.slideShow.options.mouseType,function(){self.switchTo.apply(self,arguments)});
    },
    
    switchTo:function(){
        clearInterval(this.slideShow.intervalId);
        if(this.slideShow.options.auto)
            clearTimeout(this.slideShow.autoPlayTimeout);
            
        if(this.slideShow.options.btnBlurHandler)
            this.slideShow.options.btnBlurHandler(this.slideShow.items[this.slideShow.currentIndex].btn);
        this.slideShow.currentIndex = this.index;
        
        if(this.slideShow.options.btnFocusHandler)
            this.slideShow.options.btnFocusHandler(this.btn);

        this.slideShow.intervalId = setInterval(setPosition,10);
        var self = this;
        function setPosition(){
            var currentPosition = parseInt(self.slideShow.content.getStyle(self.slideShow.options.updown?"top":"left"));
            var targetPosition = self.position;
            var step = (targetPosition - currentPosition)/self.slideShow.options.bufferStep;
            
            if(Math.abs(step)<1 && step != 0){
                step = (targetPosition-currentPosition)>0?1:-1;
            }
            currentPosition += Math.round(step);
            
            if(self.slideShow.options.updown)
                self.slideShow.content.setStyle({"top":currentPosition + "px"});
            else
                self.slideShow.content.setStyle({"left":currentPosition + "px"});
            
            if(targetPosition == currentPosition){
                clearInterval(self.slideShow.intervalId);
                if(self.slideShow.options.auto)
                    self.slideShow.autoPlay();
            }
        }
    }
});

 

 註:緩動效果的實現借鑒了cloudgamer所用的方法。即根據初始值和目標值計算出每一步的步長,初始值離目標值越大步長越大,初始值離目標值越小步長越小,從而實現緩動

 點此下載樣本

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.