开发学院网页设计JavaScript Javascript图片滚动 阅读

Javascript图片滚动

 2010-09-14 13:23:57 来源:WEB开发网   
核心提示:本文示例源代码或素材下载 这两天做了一个图片滚动的效果,拿出来和大家共享,Javascript图片滚动,效果很简单,不过这是我第一次使用js库(prototype1.6), 查看示例: http://220.194.56.98:8000/LongWayDemos/slideshow/这是第一个类,主要来负责一个

本文示例源代码或素材下载

这两天做了一个图片滚动的效果,拿出来和大家共享。效果很简单,不过这是我第一次使用js库(prototype1.6)。虽然所引用的prototype文件大小远远超过了自己所写的代码,但是这毕竟是学习而已,用js库真的能让代码更简洁。

查看示例: http://220.194.56.98:8000/LongWayDemos/slideshow/

这是第一个类,主要来负责一个SlideShow的初始化和自动播放,具有多个SlideItem实例,存储在items数组中

varSlideShow=Class.create({
  //width:宽度
  //height:高度
  //btns:按钮数组
  //content:内容
  //options:选项
  initialize:function(width,height,btns,content,options){
    varself=this;
    this.width=width;
    this.height=height;
    this.btns=btns;
    this.length=btns.length;
    this.content=content;
    this.intervalId=newObject();
    this.autoPlayTimeout=newObject();
    
    //auto:自动转换
    //updown:上下还是左右
    //mouseType:"click"或者"mouseover"
    //autoInterval:自动播放时切换的间隔
    //bufferStep:缓动的步长数值越大缓动所用时间越多一般在5-15之间
    this.options={//prototype1.6.0.2ln1159
      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(newSlideItem(self,btn,index));
    });
    
    this.items[0].switchTo();
  },
  
  autoPlay:function(){
    this.autoPlayTimeout=setTimeout(autoMove,this.options.autoInterval);
    varself=this;
    functionautoMove(){
      if(self.currentIndex+1>=self.length)
        self.items[0].switchTo();
      else
        self.items[self.currentIndex+1].switchTo();
    }
  }
});

1 2  下一页

Tags:Javascript 图片 滚动

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
更多精彩
    赞助商链接

    热点阅读
      焦点图片
        最新推荐
          精彩阅读