js 新浪的一个图片播放图片轮换效果代码


Posted in Javascript onJuly 15, 2008

js 新浪的一个图片播放图片轮换效果代码
核心代码

function slide(src,link,text,target,attr,desc) { 
  this.desc = desc 
  this.src = src; 
  this.link = link; 
  this.text = text; 
  this.target = target; 
  this.attr = attr; 
  if (document.images) { 
    this.image = new Image(); 
  } 
  this.loaded = false; 
  this.load = function() { 
    if (!document.images) { return; }     if (!this.loaded) { 
      this.image.src = this.src; 
      this.loaded = true; 
    } 
  } 
  this.hotlink = function() { 
    var mywindow; 
    if (!this.link) return; 
    if (this.target) { 
      if (this.attr) { 
        mywindow = window.open(this.link, this.target, this.attr); 
      } else { 
        mywindow = window.open(this.link, this.target); 
      } 
      if (mywindow && mywindow.focus) mywindow.focus(); 
    } else { 
      location.href = this.link; 
    } 
  } 
} 
function slideshow( slideshowname ) { 
  this.name = slideshowname; 
  this.repeat = true; 
  this.prefetch = -1; 
  this.image; 
  this.textid; 
  this.textarea; 
  this.timeout = 5000; 
  this.slides = new Array(); 
  this.current = 0; 
  this.timeoutid = 0; 
  this.add_slide = function(slide) { 
    var i = this.slides.length; 
    if (this.prefetch == -1) { 
      slide.load(); 
    } 
    this.slides[i] = slide; 
  } 
  this.play = function(timeout) { 
    this.pause(); 
    if (timeout) { 
      this.timeout = timeout; 
    } 
    if (typeof this.slides[ this.current ].timeout != 'undefined') { 
      timeout = this.slides[ this.current ].timeout; 
    } else { 
      timeout = this.timeout; 
    } 
    this.timeoutid = setTimeout( this.name + ".loop()", timeout); 
  } 
  this.pause = function() { 
    if (this.timeoutid != 0) { 
      clearTimeout(this.timeoutid); 
      this.timeoutid = 0; 
    } 
  } 
  this.update = function() { 
    if (! this.valid_image()) { return; } 
    if (typeof this.pre_update_hook == 'function') { 
      this.pre_update_hook(); 
    } 
    var slide = this.slides[ this.current ]; 
    var dofilter = false; 
    if (this.image && 
        typeof this.image.filters != 'undefined' && 
        typeof this.image.filters[0] != 'undefined') { 
      dofilter = true; 
    } 
    slide.load(); 
    if (dofilter) { 
      if (slide.filter && 
          this.image.style && 
          this.image.style.filter) { 
        this.image.style.filter = slide.filter; 
      } 
      this.image.filters[0].Apply(); 
    } 
    this.image.src = slide.image.src; 
    if (dofilter) { 
      this.image.filters[0].Play(); 
    } 
    this.display_text(); 
    if (typeof this.post_update_hook == 'function') { 
      this.post_update_hook(); 
    } 
    if (this.prefetch > 0) { 
      var next, prev, count; 
      next = this.current; 
      prev = this.current; 
      count = 0; 
      do { 
        if (++next >= this.slides.length) next = 0; 
        if (--prev < 0) prev = this.slides.length - 1; 
        this.slides[next].load(); 
        this.slides[prev].load(); 
      } while (++count < this.prefetch); 
    } 
  } 
  this.goto_slide = function(n) { 
    if (n == -1) { 
      n = this.slides.length - 1; 
    } 
    if (n < this.slides.length && n >= 0) { 
      this.current = n; 
    } 
    this.update(); 
  } 
  this.goto_random_slide = function(include_current) { 
    var i; 
    if (this.slides.length > 1) { 
      do { 
        i = Math.floor(Math.random()*this.slides.length); 
      } while (i == this.current); 
      this.goto_slide(i); 
    } 
  } 
  this.next = function() { 
    if (this.current < this.slides.length - 1) { 
      this.current++; 
    } else if (this.repeat) { 
      this.current = 0; 
    } 
    this.update(); 
  } 
  this.previous = function() { 
    if (this.current > 0) { 
      this.current--; 
    } else if (this.repeat) { 
      this.current = this.slides.length - 1; 
    } 
    this.update(); 
  } 
  this.shuffle = function() { 
    var i, i2, slides_copy, slides_randomized; 
    slides_copy = new Array(); 
    for (i = 0; i < this.slides.length; i++) { 
      slides_copy[i] = this.slides[i]; 
    } 
    slides_randomized = new Array(); 
    do { 
      i = Math.floor(Math.random()*slides_copy.length); 
      slides_randomized[ slides_randomized.length ] = 
        slides_copy[i]; 
      for (i2 = i + 1; i2 < slides_copy.length; i2++) { 
        slides_copy[i2 - 1] = slides_copy[i2]; 
      } 
      slides_copy.length--; 
    } while (slides_copy.length); 
    this.slides = slides_randomized; 
  } 
  this.get_text = function() { 
    return(this.slides[ this.current ].text); 
  } 
  this.get_all_text = function(before_slide, after_slide) { 
    all_text = ""; 
    for (i=0; i < this.slides.length; i++) { 
      slide = this.slides[i]; 
      if (slide.text) { 
        all_text += before_slide + slide.text + after_slide; 
      } 
    } 
    return(all_text); 
  } 
  this.display_text = function(text) { 
    if (!text) { 
      text = this.slides[ this.current ].text; 
    } 
    if (this.textarea && typeof this.textarea.value != 'undefined') { 
      this.textarea.value = text; 
    } 
    if (this.textid) { 
      r = this.getElementById(this.textid); 
      if (!r) { return false; } 
      if (typeof r.innerHTML == 'undefined') { return false; } 
      r.innerHTML = text; 
    } 
  } 
  this.hotlink = function() { 
    this.slides[ this.current ].hotlink(); 
  } 
  this.save_position = function(cookiename) { 
    if (!cookiename) { 
      cookiename = this.name + '_slideshow'; 
    } 
    document.cookie = cookiename + '=' + this.current; 
  } 
  this.restore_position = function(cookiename) { 
    if (!cookiename) { 
      cookiename = this.name + '_slideshow'; 
    } 
    var search = cookiename + "="; 
    if (document.cookie.length > 0) { 
      offset = document.cookie.indexOf(search); 
      if (offset != -1) {  
        offset += search.length; 
        end = document.cookie.indexOf(";", offset); 
        if (end == -1) end = document.cookie.length; 
        this.current = parseInt(unescape(document.cookie.substring(offset, end))); 
        } 
     } 
  } 
  this.noscript = function() { 
    $html = "\n"; 
    for (i=0; i < this.slides.length; i++) { 
      slide = this.slides[i]; 
      $html += '<P>'; 
      if (slide.link) { 
        $html += '<a href="' + slide.link + '">'; 
      } 
      $html += '<img src="' + slide.src + '" ALT="slideshow image">'; 
      if (slide.link) { 
        $html += "<\/a>"; 
      } 
      if (slide.text) { 
        $html += "<BR>\n" + slide.text; 
      } 
      $html += "<\/P>" + "\n\n"; 
    } 
    $html = $html.replace(/\&/g, "&" ); 
    $html = $html.replace(/</g, "<" ); 
    $html = $html.replace(/>/g, ">" ); 
    return('<pre>' + $html + '</pre>'); 
  } 
  this.loop = function() { 
    if (this.current < this.slides.length - 1) { 
      next_slide = this.slides[this.current + 1]; 
      if (next_slide.image.complete == null || next_slide.image.complete) { 
        this.next(); 
      } 
    } else { 
      this.next(); 
    } 
    this.play( ); 
  } 
  this.valid_image = function() { 
    if (!this.image){ 
      return false; 
    } 
    else { 
      return true; 
    } 
  } 
  this.getElementById = function(element_id) { 
    if (document.getElementById) { 
      return document.getElementById(element_id); 
    } 
    else if (document.all) { 
      return document.all[element_id]; 
    } 
    else if (document.layers) { 
      return document.layers[element_id]; 
    } else { 
      return undefined; 
    } 
  } 
  this.set_image = function(imageobject) { 
    if (!document.images) 
      return; 
    this.image = imageobject; 
  } 
  this.set_textarea = function(textareaobject) { 
    this.textarea = textareaobject; 
    this.display_text(); 
  } 
  this.set_textid = function(textidstr) { 
    this.textid = textidstr; 
    this.display_text(); 
  } 
}

新浪图片播放器在线演示
新浪图片播放器打包下载
Javascript 相关文章推荐
js 动态文字滚动的例子
Jan 17 Javascript
常用Extjs工具:Extjs.util.Format使用方法
Mar 22 Javascript
jquery实现图片预加载
Dec 25 Javascript
JavaScript阻止回车提交表单的方法
Dec 30 Javascript
详解Javascript数据类型的转换规则
Dec 12 Javascript
js实现九宫格拼图小游戏
Feb 13 Javascript
vue-hook-form使用详解
Apr 07 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
JS调用安卓手机摄像头扫描二维码
Oct 16 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
Oct 24 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
纯js实现的论坛常用的运行代码的效果
Jul 15 #Javascript
点图片上一页下一页翻页效果
Jul 09 #Javascript
JS的数组的扩展实例代码
Jul 09 #Javascript
JS location几个方法小姐
Jul 09 #Javascript
非常不错的功能强大代码简单的管理菜单美化版
Jul 09 #Javascript
javascript jQuery $.post $.ajax用法
Jul 09 #Javascript
javascript同步Import,同步调用外部js的方法
Jul 08 #Javascript
You might like
c#中的实现php中的preg_replace
2009/12/21 PHP
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
PHP消息队列用法实例分析
2016/02/12 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
JS 参数传递的实际应用代码分析
2009/09/13 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
node.js实现多图片上传实例
2014/06/03 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
通过隐藏iframe实现无刷新上传文件操作
2016/03/16 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
2018/07/11 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
python 字符串常用方法汇总详解
2019/09/16 Python
redis数据库及与python交互用法简单示例
2019/11/01 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
Ajxa常见问题都有哪些
2014/03/26 面试题
拉丁舞学习者的自我评价
2013/10/27 职场文书
班长岗位职责
2013/11/10 职场文书
优秀学生自我鉴定范例
2013/12/18 职场文书
工程招投标邀请书
2014/01/26 职场文书
生日主持词
2014/03/20 职场文书
婚礼秀策划方案
2014/05/19 职场文书
高三英语教学计划
2015/01/23 职场文书
解析MySQL binlog
2021/06/11 MySQL
新手入门Mysql--概念
2021/06/18 MySQL