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 相关文章推荐
JQuery 简便实现页面元素数据验证功能
Mar 24 Javascript
Jquery实战_读书笔记2 选择器
Jan 22 Javascript
Javascript高级技巧分享
Feb 25 Javascript
javaScript使用EL表达式的几种方式
May 27 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
JavaScript中exec函数用法实例分析
Jun 08 Javascript
JS判断浏览器是否安装flash插件的简单方法
Sep 13 Javascript
Jquery EasyUI Datagrid右键菜单实现方法
Dec 30 Javascript
jQuery图片瀑布流的简单实现代码
Mar 15 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
详解JavaScript的数据类型以及数据类型的转换
Apr 20 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 变量定义和变量替换的方法
2009/07/30 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP chr()函数讲解
2019/02/11 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
javascript Object与Function使用
2010/01/11 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
原生js和jquery实现图片轮播淡入淡出效果
2015/04/23 Javascript
浅析JavaScript 调试方法和技巧
2015/10/22 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
Python获取linux主机ip的简单实现方法
2016/04/18 Python
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
浅谈pandas中DataFrame关于显示值省略的解决方法
2018/04/08 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
Python中的类与类型示例详解
2019/07/10 Python
python如何统计代码运行的时长
2019/07/24 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
加拿大领先的冒险和户外零售商:Atmosphere
2017/12/19 全球购物
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
全球异乡人的跨境社交电商平台:Kouhigh口嗨网
2020/07/24 全球购物
会计专业大学生职业生涯规划范文
2014/01/11 职场文书
超市创意活动方案
2014/08/15 职场文书
房产分割协议书范文
2014/11/21 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
亮剑观后感500字
2015/06/05 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
golang 如何用反射reflect操作结构体
2021/04/28 Golang
MySql数据库 查询时间序列间隔
2022/05/11 MySQL