`
moonshadows
  • 浏览: 16127 次
  • 性别: Icon_minigender_1
  • 来自: 青岛
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

新浪网站的图片(相册)播放器

阅读更多

<style type="text/css">
<!--

body,ul,ol,li,p,form,fieldset,table,td{font-family:"宋体";}
body{background:#fff;color:#000;text-align:center; margin-top:5px;}
td,p,li,select,input,textarea,div{font-size:12px;}

ul{list-style-type:none;}
select,input{vertical-align:middle;}

.f14{font-size:14px;}
.lh20{line-height:20px;}

a{text-decoration:underline;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#f00;}

.clearit{clear:both;}

/* 列表 */
/* 14px加点列表 */
.link14listStyle li{text-align:left;line-height:23px;font-size:14px;padding:0 0 0 9px;background:url([img]http://image2.sina.com.cn/dy/legal/2006index/news_law_hz_012.gif[/img]) no-repeat 0 50%;}
/* 14px无点列表 */
.link14list li{text-align:left;line-height:23px;font-size:14px;padding:0;}
/* 12px加点列表 */
.link12listStyle li{text-align:left;line-height:20px;font-size:12px;padding:0 0 0 9px;background:url([img]http://image2.sina.com.cn/dy/legal/2006index/news_law_hz_012.gif[/img]) no-repeat 0 45%;}
/* 12px无点列表 */
.link12list li{text-align:left;line-height:20px;font-size:12px;padding:0;}

/* 主容器 */
#wrap{width:750px;margin:0 auto;text-align:left;}


/* 导航 */
#nav{width:750px; height:27px; overflow:hidden; clear:both; margin:0 0 3px 0; background:url([img]http://image2.sina.com.cn/dy/deco/2007/0208/top100_i_ws_002.gif[/img]) repeat-x;}
#nav #navlogo{float:left; width:247px;}
#nav ul{padding-right:18px; width:485px; float:right;}
html* #nav ul{width:503px;}
#nav li{float:right; width:48px; text-align:center; line-height:27px; height:27px; color:#039;}
#nav a{text-decoration:none;}
#nav a:link,#nav a:visited{color:#039;}
#nav a:hover,#nav a:active,#nav a:focus{color:#f00;}

/* banner */
.banner{height:100px;background:url([img]http://image2.sina.com.cn/dy/deco/2007/0208/top100_i_ws_003.jpg[/img]) no-repeat;}
.banner h1{font-weight:normal;font-size:36px;color:#fff;font-family:"黑体";text-align:center;line-height:100px;}

/* 主容器 */
#wrap{width:750px;margin:0 auto;text-align:left;}

/* 播放器样式(部分) */
.itemOff{width:16px; height:14px; line-height:14px; background:#cfe6ff; border:1px #5673a8 solid; margin:0 5px 5px 0; float:left; cursor:pointer; color:#008; text-align:center;}
.itemOn{width:16px; height:14px; line-height:14px; background:#fff; border:1px #5673a8 solid; margin:0 5px 5px 0; float:left; cursor:pointer; color:#008; text-align:center;}
.PListImg{line-height:18px; color:#000; margin-top:15px;}
.PListImg a{text-decoration:underline;}
.PListImg a:link,.PListImg a:visited{color:#000;}
.PListImg a:hover,.PListImg a:active{color:#f00;}
.PListImg .PLDiv{width:115px; height:95px; border:1px #acacac solid; background:#fff;}
.PListImg img{width:105px; height:85px; margin:5px;}
-->
</style>

<div style="padding:3px; background:#fff; border:1px #7c97c6 solid; margin-top:5px; width:450px; overflow:hidden;">
<!-- 图片播放器 begin -->
<script type="text/javascript">
<!--
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.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();
}
}
//-->
</script>
<script type="text/javascript">
<!--
ss = new slideshow("ss");
ss.prefetch = 1;
ss.sizelmt = true;
ss.repeat = true;


        s = new slide();
        s.src = "http://image2.sina.com.cn/dy/photo/360/2007/0418/U1473P1T360D28F8101DT20070418084634.JPG";
        s.title = "弗吉尼亚理工大学充满悲痛";
        s.link = "http://news.sina.com.cn/w/p/2007-04-18/055512804495.shtml";
        s.desc = "";
        ss.add_slide(s);
       
        s = new slide();
        s.src = "http://image2.sina.com.cn/dy/photo/360/2007/0418/U1473P1T360D28F8112DT20070418084634.JPG";
        s.title = "学生自发在约翰斯顿宿舍楼前献花";
        s.link = "http://news.sina.com.cn/w/p/2007-04-18/055512804491.shtml";
        s.desc = "";
        ss.add_slide(s);
       
        s = new slide();
        s.src = "http://image2.sina.com.cn/dy/photo/360/2007/0418/U1473P1T360D28F8114DT20070418084634.JPG";
        s.title = "学生自发树立VT纪念碑";
        s.link = "http://news.sina.com.cn/w/p/2007-04-18/055412804487.shtml";
        s.desc = "";
        ss.add_slide(s);
       
        s = new slide();
        s.src = "http://image2.sina.com.cn/dy/photo/360/2007/0418/U1473P1T360D28F8115DT20070418084634.JPG";
        s.title = "万人追思枪案死难者";
        s.link = "http://news.sina.com.cn/w/p/2007-04-18/053812804344.shtml";
        s.desc = "";
        ss.add_slide(s);
       
        s = new slide();
        s.src = "http://image2.sina.com.cn/dy/photo/360/2007/0418/U1473P1T360D28F8116DT20070418084634.JPG";
        s.title = "万人追思弗吉尼亚理工大学枪案死难者";
        s.link = "http://news.sina.com.cn/w/p/2007-04-18/053812804341.shtml";
        s.desc = "";
        ss.add_slide(s);
       
        s = new slide();
        s.src = "http://image2.sina.com.cn/dy/photo/360/2007/0418/U1473P1T360D28F8117DT20070418084634.JPG";
        s.title = "弗吉尼亚工学院学生为遇难同学守夜";
        s.link = "http://news.sina.com.cn/w/p/2007-04-17/224112801948.shtml";
        s.desc = "";
        ss.add_slide(s);
       
        s = new slide();
        s.src = "http://image2.sina.com.cn/dy/photo/360/2007/0418/U1473P1T360D28F8118DT20070418084634.JPG";
        s.title = "弗吉尼亚工学院学生为遇难同学守夜";
        s.link = "http://news.sina.com.cn/w/p/2007-04-17/224012801946.shtml";
        s.desc = "";
        ss.add_slide(s);
       
        s = new slide();
        s.src = "http://image2.sina.com.cn/dy/photo/360/2007/0418/U1473P1T360D28F8119DT20070418084634.JPG";
        s.title = "学生高举标牌表达对死难者的悼念";
        s.link = "http://news.sina.com.cn/w/p/2007-04-18/055512804489.shtml";
        s.desc = "";
        ss.add_slide(s);
       
        s = new slide();
        s.src = "http://image2.sina.com.cn/dy/photo/360/2007/0418/U1473P1T360D28F8120DT20070418084634.JPG";
        s.title = "数百名记者云集校园";
        s.link = "http://news.sina.com.cn/w/p/2007-04-18/055512804492.shtml";
        s.desc = "";
        ss.add_slide(s);
       
        s = new slide();
        s.src = "http://image2.sina.com.cn/dy/photo/360/2007/0418/U1473P1T360D28F8102DT20070418084634.JPG";
        s.title = "发生第一起枪击案的约翰斯顿宿舍楼";
        s.link = "http://news.sina.com.cn/w/p/2007-04-18/055512804494.shtml";
        s.desc = "";
        ss.add_slide(s);
       
   
for (var i=0; i < ss.slides.length; i++) {
    s = ss.slides[i];
    s.target = "_blank";
}
//-->
</script>


<table width="438" cellspacing="0">
<tr valign="top">
<td width="448" style="background:url([img]http://image2.sina.com.cn/dy/deco/2007/0208/hdtj_ws_001.gif[/img]) no-repeat 14px 17px #dedede;">
    <!-- 播放器主体 bgein -->
    <div id="ss_img_div" style="width:406px; height:302px; margin:26px 0 0 23px; clear:both;"><a href="javascript:ss.hotlink();"><img id="ss_img" style="FILTER: blendTrans (Duration=1)" width="406" height="302" src="http://image2.sina.com.cn/dy/photo/360/2007/0418/U1473P1T360D28F8101DT20070418084634.JPG" alt=""/></a></div>
    <div style="margin:15px 0 17px 0; text-align:center; font-weight:bold; clear:both;" id="tt">弗吉尼亚理工大学充满悲痛</div>
    <table width="448" cellspacing="0" style="background:#ededed;">
    <tr valign="middle" align="left">
    <td width="15" height="50"></td>
    <td width="220">
        <div class="itemOff" id="imbtn0" onClick="ss.goto_slide(0)">1</div>
<div class="itemOff" id="imbtn1" onClick="ss.goto_slide(1)">2</div>
<div class="itemOff" id="imbtn2" onClick="ss.goto_slide(2)">3</div>
<div class="itemOff" id="imbtn3" onClick="ss.goto_slide(3)">4</div>
<div class="itemOff" id="imbtn4" onClick="ss.goto_slide(4)">5</div>
<div class="itemOff" id="imbtn5" onClick="ss.goto_slide(5)">6</div>
<div class="itemOff" id="imbtn6" onClick="ss.goto_slide(6)">7</div>
<div class="itemOff" id="imbtn7" onClick="ss.goto_slide(7)">8</div>
<div class="itemOff" id="imbtn8" onClick="ss.goto_slide(8)">9</div>
<div class="itemOff" id="imbtn9" onClick="ss.goto_slide(9)">10</div>

    </td>
    <td width="83" style="color:#008;">
速度 <select name="select" style="width:45px;">
<option selected="selected" id="iter_5" onChange="javascript:document.ss_form.sp1[0].click();ss.timeout=5000" name="sp1">5秒</option>
<option onChange="javascript:document.ss_form.sp1[1].click();ss.timeout=10000" name="sp1">10秒</option>
</select>
    </td>
    <td width="130">
        <table cellspacing="0">
        <tr align="left">
        <td width="29"><a href="javascript:ss.previous()"><img src="http://image2.sina.com.cn/dy/deco/2007/0208/hdtj_ws_002.gif" width="23" height="18" alt="上一张" border="0" /></a></td>
        <td width="29"><a href="javascript:ss.next();ss.play()"><img src="http://image2.sina.com.cn/dy/deco/2007/0208/hdtj_ws_003.gif" width="23" height="18" alt="播放" border="0" /></a></td>
        <td width="29"><a href="javascript:ss.pause()"><img src="http://image2.sina.com.cn/dy/deco/2007/0208/hdtj_ws_004.gif" width="23" height="18" alt="暂停" border="0" /></a></td>
        <td width="29"><a href="javascript:ss.next()"><img src="http://image2.sina.com.cn/dy/deco/2007/0208/hdtj_ws_005.gif" width="23" height="18" alt="下一张" border="0" /></a></td>
        </tr>
        </table>
    </td>
    </tr>
    </table>
    <!-- 播放器主体 end -->
</td>
</tr>
</table>
<script type="text/javascript">
<!--
ss.pre_update_hook = function() {
    sid = ss.current;
    title = ss.slides[sid].title;
    linkurl = ss.slides[sid].link;
    totals = ss.slides.length;
    sdesc = ss.slides[sid].desc;
    tempid = parseInt(sid) + 1;
    document.getElementById("tt").innerHTML = title;
    for (var i = 0;i < 10;i++){
        document.getElementById("imbtn"+i).className = "itemOff";
    }
    document.getElementById("imbtn"+sid).className = "itemOn";
return;
}
if (document.images) {
    ss.image = document.images.ss_img;
    ss.update();
    ss.play();
}
//-->
</script>
<!-- 图片播放器 end -->
</div>

分享到:
评论

相关推荐

    新浪图库JS图片播放器样式.rar

    【新浪图库JS图片播放器样式】是一种常见的网页图片展示技术,主要利用JavaScript语言实现动态的图片轮播效果,常用于网站的图库展示。这种技术可以为用户提供更丰富的交互体验,使图片浏览更加生动有趣。在网页设计...

    花了N长时间掏了N多各大门户幻灯样式给大家分享【经典收藏】

    新浪图库JS图片播放器样式 flash滑动焦点图代码 新浪相册首页9格FLASH图片展 千龙网JS带缩略图的5屏轮换 雅虎社区4屏焦点轮换 搜狐娱乐频道flash焦点图广告 四屏flash图片轮换代码 沪江英语网3图弹性广告展示 淘宝网...

    JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个

    49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播...

    JavaScript_JQuery_CSS_DIV漂亮的实例

    49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播...

    100多个JQuery效果示例(实例)div+css+javascrpit

    49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播...

    jquery 动态示例

    49. jquery相册播放器插件实现无序图片列表转换成有序并播放 50. jQuery移动网页背景图浮云流水特效 51. jquery简单控制上下、左右四方向滚动的特效插件下载 52. jquery缩略图滚动特效之带小图的网页元素滚动轮播...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    49.jquery相册播放器插件实现无序图片列表转换成有序并播放 50.jQuery移动网页背景图浮云流水特效 51.jquery简单控制上下、左右四方向滚动的特效插件下载 52.jquery缩略图滚动特效之带小图的网页元素滚动轮播...

    网易新浪QQ邮箱的html在线编辑器

    2. QQ邮箱编辑器:QQ邮箱的在线编辑器同样具备基本的编辑功能,特色在于集成QQ空间、腾讯相册等服务,方便用户直接插入个人的图片和日志内容。此外,它还支持实时同步通讯录,便于发送邮件给联系人。 3. 新浪博客...

    楼盘商业插件

    楼盘图库,楼盘图片使用图库播放器查看,可以自动播放,一次性浏览各个相册的图片,支持同一楼盘下各个相册的切换,具有更好的图片阅读体验; 楼盘关联论坛,楼盘可以关联论坛的版块或帖子,关联论坛后会在楼盘头部...

    交友相亲社交网站模板支持手机wap版

    32、修正后台视频审核预览flv播放器 33、修正后台地区管理 34、免责声明移植到后台管理发布 35、去除了隐身登录功能,更改为自动保存用户名密码功能 36、重新开发了在线泡币机制 37、VIP会员升级时效增加3年和5年 38...

    Teahouse WordPress主题

    4.怎么创建相册文章,首先写文章时选择类型为“相册”,然后勾选“显示选项”里面的“相册设置”,点击“添加图片”创建即可。 5.主题有三个小工具区域,每个区域都是假如为空时,区域是隐藏的。举个例子,假如右边...

    炎汉房产楼盘系统 3.5 商业版|强大的Discuz房产插件+实用的房产平台插件

    楼盘图库,楼盘图片使用图库播放器查看,可以自动播放,一次性浏览各个相册的图片,支持同一楼盘下各个相册的切换,具有更好的图片阅读体验; 楼盘关联论坛,楼盘可以关联论坛的版块或帖子,关联论坛后会在楼盘头部...

    2021年Dreamweaver上机考试题目dreamweaver试题库网制作试题.doc

    10. Flash相册:使用Dreamweaver内置的Flash功能创建相册,设置自动翻页,添加多张图片。 11. 右键菜单:安装右键菜单插件,然后在4-右.html中调用插件,设置链接指向网易。 12. 背景音乐:在5.html中使用`&lt;audio&gt;...

    KesionCMS v9.5.140605 免费正式版本(utf-8).rar

    其次,影视系统增加支持百度播放器(默认)及快播,允许下载的话,还支持迅雷及快车下载,让前台用户可以自由选择播放器类型。后台添加的每部影片还支持自定义广告。可设置是否对VIP用户组开放观看影片免广发等。 ...

    KesionCMS v9.5.140605 免费正式版(gbk).rar

    其次,影视系统增加支持百度播放器(默认)及快播,允许下载的话,还支持迅雷及快车下载,让前台用户可以自由选择播放器类型。后台添加的每部影片还支持自定义广告。可设置是否对VIP用户组开放观看影片免广发等。 ...

    SpaceBuilder_V2.3_SP1

    修改优酷专辑视频的播放器地址和缩略图不能解析 SpaceBuilder/Share.Web/SiteHtmlParsers/YoukuPlayListHtmlParser.cs 25.修改新浪视频分享的正则表达式 SpaceBuilder/Web/SpaceBuilder.config 26.修改新浪...

    Web2.0社区平台源码

    24.修改优酷专辑视频的播放器地址和缩略图不能解析 SpaceBuilder/Share.Web/SiteHtmlParsers/YoukuPlayListHtmlParser.cs 25.修改新浪视频分享的正则表达式 SpaceBuilder/Web/SpaceBuilder.config 26.修改新浪视频...

Global site tag (gtag.js) - Google Analytics