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 文档的编码问题解决
Mar 01 Javascript
jcarousellite.js 基于Jquery的图片无缝滚动插件
Dec 30 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
May 25 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
浅谈vue+webpack项目调试方法步骤
Sep 11 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 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
一个php作的文本留言本的例子(三)
2006/10/09 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
js CSS操作方法集合
2008/10/31 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
JS中setTimeout的巧妙用法前端函数节流
2016/03/24 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
解决ionic和angular上拉加载的问题
2017/08/03 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
微信小程序跨页面传递data数据方法解析
2019/12/13 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
python抽象基类用法实例分析
2015/06/04 Python
Python图像处理之gif动态图的解析与合成操作详解
2018/12/30 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
Python + selenium + crontab实现每日定时自动打卡功能
2020/03/31 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
Myprotein荷兰官网:欧洲第一运动营养品牌
2020/07/11 全球购物
护理专业个人求职简历的自我评价
2013/10/13 职场文书
后备干部考察材料
2014/02/12 职场文书
说明书范文
2014/05/07 职场文书
公司联欢会策划方案
2014/05/19 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
大学学生个人总结
2015/02/15 职场文书
团日活动总结格式
2015/05/11 职场文书
redis requires ruby version2.2.2的解决方案
2021/07/15 Redis
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
MySQL数据库优化之通过索引解决SQL性能问题
2022/04/10 MySQL