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 相关文章推荐
JavaScript中连接操作Oracle数据库实例
Apr 02 Javascript
简介JavaScript中toTimeString()方法的使用
Jun 12 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
JavaScript中Date对象的常用方法示例
Oct 24 Javascript
JavaScript中setter和getter方法介绍
Jul 11 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
Nov 15 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
Aug 03 Javascript
Node.JS如何实现JWT原理
Sep 18 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
纯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
php快速url重写 更新版[需php 5.30以上]
2010/04/20 PHP
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
php实现插入数组但不影响原有顺序的方法
2015/03/27 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
Jquery Ajax请求代码(2)
2011/01/07 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
JS的replace方法介绍
2012/10/20 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
使用js 设置url参数
2013/07/08 Javascript
jQuery实现图片预加载效果
2015/11/27 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
详解Vue方法与事件
2017/03/09 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
Vue引入sass并配置全局变量的方法
2018/06/27 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
vue不操作dom实现图片轮播的示例代码
2019/12/18 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
2020/02/15 Javascript
vue总线机制(bus)知识点详解
2020/05/10 Javascript
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Python实现点阵字体读取与转换的方法
2019/01/29 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
django-rest-swagger的优化使用方法
2019/08/29 Python
Python pip配置国内源的方法
2020/02/14 Python
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
波兰多品牌运动商店:StreetStyle24.pl
2020/09/22 全球购物
诚信考试倡议书
2014/04/15 职场文书
桥梁工程专业求职信
2014/04/21 职场文书
物理系毕业生自荐书
2014/06/13 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript