实用的JS模仿新浪图库播放器样式

查看效果

下载地址

前台部分代码

 

代码

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312"   />
< meta  name ="Copyright"  content ="网页前端设计吧 http://www.jscss8.com/"   />
< meta  name ="keywords"  content ="JS代码,焦点图,JS广告代码,JS特效代码"   />
< meta  name ="description"  content ="此代码内容为新浪图库JS图片播放器样式，属于站长常用代码，更多焦点图代码请访问网页前端设计吧JS代码频道。"   />
< title > 新浪图库JS图片播放器样式_网页前端设计吧 </ title >

< style  type ="text/css" >
<!--
/*  CSS from lmy 2007-4-28 */
/* CSS for all begin */
ul, ol, li, img  { margin : 0 ;  padding : 0 ;  border : 0 ; }

/* 播放器样式 20070510 修改 lmy 开始  */
#ImgPlayer { width : 682px ;  height : 352px ;  overflow : hidden ;  border : 3px #BDCBD7 solid ;  padding : 1px 3px 0 1px ; }
#ImgBlk { width : 452px ;  height : 339px ;  background : url(images/news_pic_ws_001.gif) no-repeat 10px 2px #E9F0F7 ;  padding : 13px 12px 0 11px ;  float : left ; }
#ss_img_div { width : 452px ;  height : 302px ;  overflow : hidden ; }
#ss_img_div img { border : 1px #000 solid ; }
#ImgNum { height : 37px ;  overflow : hidden ; }
#ImgNum ul { width : 375px ;  padding : 0 0 0 0 ;  float : left ;  cursor : default ; }
#ImgNum li { width : 30px ;  height : 25px ;  line-height : 25px ;  overflow : hidden ;  padding : 6px 0 0 0 ;  text-align : center ;  font-family : Arial ;   font-size : 9px ;  float : left ;  margin-right : 5px ;  cursor : pointer ; }
#ImgNum li.itemOff { background : url(images/news_pic_ws_002.gif) no-repeat bottom ;  color : #000 ; }
#ImgNum li.itemOff:hover { color : #A80000 ; }
#ImgNum li.itemOn { background : url(images/news_pic_ws_003.gif) no-repeat bottom ;  color : #A80000 ;  font-weight : bold ;  height : 25px ;  line-height : 25px ;  padding : 6px 0 0 0 ; }
#ImgNum div { float : left ;  width : 73px ;  text-align : left ;  padding : 4px 0 0 0 ;  margin : 10px 0 0 0 ;  height : 15px ;  line-height : 15px ;  cursor : pointer ;  font-size : 12px ;  color : #7D98BF ; }
#Play { background : url(images/news_pic_ws_004.gif) no-repeat bottom right ; }
#Pause { background : url(images/news_pic_ws_005.gif) no-repeat bottom right ; }
#TxtBlk { width : 206px ;  float : left ; }
#Txt { padding : 15px 10px 0 10px ;  text-align : left ;  height : 300px ;  border : 1px #D7E5F5 solid ;  border-left : none ;  background : url(images/news_pic_ws_006.gif) repeat-x bottom ; }
#Txt h2 { color : #A80000 ;  text-align : center ;  font-size : 18px ;  font-family : "黑体" ;  font-weight : normal ;  padding : 1px 0 5px 0 ;  background : none ; }
#Txt h2 a,#Txt h2 a:visited { color : #A80000 ;  text-decoration : none ; }
#Txt h2 a:hover,#Txt h2 a:active { color : #A80000 ;  text-decoration : underline ; }
#con { text-align : left ;  color : #344F71 ;  line-height : 21px ; }
#date_PN { text-align : left ;  font-size : 12px ; }
#date { padding : 12px 0 0 8px ;  color : #5C5C5C ;  width : 200px ;  float : left ;  text-align : center }
#PN { float : left ;  width : 100px ;  padding : 11px 0 0 0 ;  background : url(images/news_pic_ws_007.gif) no-repeat 50px 9px ; }
#PN #pre { display : block ;  float : left ;  width : 42px ;  padding : 0 0 0 8px ;  background : url(images/news_pic_ws_008.gif) no-repeat 0 3px ;  text-decoration : none ;  color : #009 ; }
#PN #next { display : block ;  float : left ;  width : 44px ;  padding : 0 0 0 6px ;  background : url(images/news_pic_ws_009.gif) no-repeat 44px 3px ;  text-decoration : none ;  color : #009 ; }
#PN #pre:visited,#PN #next:visited { color : #009 ; }
#PN #pre:hover,#PN #next:hover { text-decoration : underline ; }
/* 播放器样式 20070510 修改 lmy 结束 */

-->
</ style >
</ head >

< body >
< DIV  align ="center" >
<!--  播放器 begin  -->
< script  type ="text/javascript"  src ="js/imgplayer1.js" ></ script >
< script  type ="text/javascript"  language ="javascript" >
             // 内容部分
            ss  =   new  slideshow( " ss " );

            ss.prefetch  =   1 ;
            
            ss.sizelmt  =   true ;
            
            ss.repeat  =   true ;
                                    
                s  =   new  slide();
    s.src  =   " images/U1565P1T247D4546F4939DT20070723090615.jpg " ;
    s.title  =   " 热浪袭击欧洲 " ;
    s.link  =   " http://www.jscss8.com/ " ;
    s.con  =   " 欧洲南部和中部一些国家连日来遭遇高温热浪袭击。截至21日，罗马尼亚、奥地利和保加利亚因持续高温造成的死亡人数已达18人。 " ;
    ss.add_slide(s);

    s  =   new  slide();
    s.src  =   " images/U1565P1T247D4547F4939DT20070723093347.jpg " ;
    s.title  =   " 杭州出现雷暴天气 " ;
    s.link  =   " http://www.jscss8.com/ " ;
    s.con  =   " 22日傍晚到夜间，杭州出现一场持续四个小时的罕见雷暴天气。 " ;
    ss.add_slide(s);

    s  =   new  slide();
    s.src  =   " images/U1565P1T247D4548F4939DT20070723093437.jpg " ;
    s.title  =   " 女子因相貌闭门不出 " ;
    s.link  =   " http://www.jscss8.com/ " ;
    s.con  =   " 7月12日，浏阳市沙市镇团农村，由于长相丑陋，陈小红常闭门不出。30多年来，被人们称为“鬼脸女”。自卑让她习惯于在黑暗中舔犊内心的忧伤。 " ;
    ss.add_slide(s);

    s  =   new  slide();
    s.src  =   " images/U1565P1T247D4549F4939DT20070723093650.jpg " ;
    s.title  =   " 英国遭受暴雨袭击 " ;
    s.link  =   " http://www.jscss8.com/ " ;
    s.con  =   " 英格兰西部、中部和南部以及威尔士的许多地区遭受暴雨袭击，成千上万的房屋被淹。 " ;
    ss.add_slide(s);

    s  =   new  slide();
    s.src  =   " images/U1565P1T247D4550F4939DT20070723093940.jpg " ;
    s.title  =   " 青海塔尔寺晒大佛 " ;
    s.link  =   " http://www.jscss8.com/ " ;
    s.con  =   " 晒大佛，在每年农历四，六月两次法会时举行。意思是为纪念释迦牟尼诞生成道。 " ;
    ss.add_slide(s);

    s  =   new  slide();
    s.src  =   " images/U1043P1T247D4544F4939DT20070722122754.jpg " ;
    s.title  =   " 英国连遭暴雨袭击 " ;
    s.link  =   " http://www.jscss8.com/ " ;
    s.con  =   " 连续两天的暴雨使英国部分地区遭遇洪灾，交通中断、房屋被淹等使救援人员疲于应付。英国首相布朗表示，需要从洪灾中“吸取教训”。 " ;
    ss.add_slide(s);

    s  =   new  slide();
    s.src  =   " images/U1043P1T247D4545F4939DT20070722122927.jpg " ;
    s.title  =   " 云南图书馆气体泄漏 " ;
    s.link  =   " http://www.jscss8.com/ " ;
    s.con  =   " 云南省图书馆保安罗军再次来到电子阅览室，准备救第二个人时，他感到头晕，摇晃了一些，因为体内吸入过多的白雾，也栽倒到电子阅览室里。 " ;
    ss.add_slide(s);

    s  =   new  slide();
    s.src  =   " images/U1043P1T247D4539F4939DT20070720085817.jpg " ;
    s.title  =   " 女子裸体抗议KFC虐鸡 " ;
    s.link  =   " http://www.jscss8.com/ " ;
    s.con  =   " 2007年7月19日，曼谷，2名裸体示威者抗议KFC虐待鸡只。 " ;
    ss.add_slide(s);

    s  =   new  slide();
    s.src  =   " images/U1043P1T247D4540F4939DT20070720085856.jpg " ;
    s.title  =   " 新疆北屯塑钢厂起火 " ;
    s.link  =   " http://www.jscss8.com/ " ;
    s.con  =   " 2007年7月19日，新疆北屯一塑钢厂发生火灾。大火烧毁了生产车间并引燃了露天堆放的发泡包装网，塑料制品燃烧产生的滚滚浓烟向大气排放了大量的污染物。 " ;
    ss.add_slide(s);

    s  =   new  slide();
    s.src  =   " images/U1043P1T247D4541F4939DT20070720090022.jpg " ;
    s.title  =   " 美国举办套小牛活动 " ;
    s.link  =   " http://www.jscss8.com/ " ;
    s.con  =   " 2007年7月18日，美国怀俄明州夏安边境日，套小牛活动正在进行中。 " ;
    ss.add_slide(s);


                        
             for  ( var  i = 0 ; i  <  ss.slides.length; i ++ ) {
            
                s  =  ss.slides[i];
            
                s.target  =   " _blank " ;
            
            }
             // --><!]]>
             </ script >
            
             <!--  图片播放器主体 begin  -->
             < div  id ="ImgPlayer" >
                 <!--  大图 begin  -->
                 < div  id ="ImgBlk" >
                     < div  id ="ss_img_div" >< a  href ="javascript:ss.hotlink();" >< img  id ="ss_img"  style ="filter:blendTrans(Duration=1);"  width ="450"  height ="300"  src ="images/U1565P1T247D4546F4939DT20070723090615.jpg"  alt ="热浪袭击欧洲" />
</ a ></ div >
                     < div  id ="ImgNum" >
                         <!--  数字 begin  -->
                         < ul >
                             < li  class ="itemOff"  id ="imbtn0"  onclick ="ss.goto_slide(0)" > 1 </ li >
                             < li  class ="itemOff"  id ="imbtn1"  onclick ="ss.goto_slide(1)" > 2 </ li >
                             < li  class ="itemOff"  id ="imbtn2"  onclick ="ss.goto_slide(2)" > 3 </ li >
                             < li  class ="itemOff"  id ="imbtn3"  onclick ="ss.goto_slide(3)" > 4 </ li >
                             < li  class ="itemOff"  id ="imbtn4"  onclick ="ss.goto_slide(4)" > 5 </ li >
                             < li  class ="itemOff"  id ="imbtn5"  onclick ="ss.goto_slide(5)" > 6 </ li >
                             < li  class ="itemOff"  id ="imbtn6"  onclick ="ss.goto_slide(6)" > 7 </ li >
                             < li  class ="itemOff"  id ="imbtn7"  onclick ="ss.goto_slide(7)" > 8 </ li >
                             < li  class ="itemOff"  id ="imbtn8"  onclick ="ss.goto_slide(8)" > 9 </ li >
                             < li  class ="itemOff"  id ="imbtn9"  onclick ="ss.goto_slide(9)" > 10 </ li >
                         </ ul >
                         <!--  数字 end  -->
                         <!--  播放 begin  -->
                         < div  id ="Play"  onclick ="ss.play(); document.getElementById('Pause').style.display='block'; this.style.display='none';"  onmousemove ="this.style.color='#c00';"  onmouseout ="this.style.color='#7D98BF';"  style ="display:none;" > 自动播放 </ div >
                         <!--  播放 end  -->
                         <!--  暂停 begin  -->
                         < div  id ="Pause"  onclick ="ss.pause(); document.getElementById('Play').style.display='block'; this.style.display='none';"  onmousemove ="this.style.color='#c00';"  onmouseout ="this.style.color='#7D98BF';" > 暂停播放 </ div >
                         <!--  暂停 end  -->
                     </ div >
                 </ div >
                 <!--  大图 end  -->
                 <!--  标题正文 begin  -->
                 < div  id ="TxtBlk" >
                     <!--  内容 begin  -->
                     < div  id ="Txt" >
                         < h2  id ="tt" > 热浪袭击欧洲 </ h2 >
                         < p  id ="con" > 欧洲南部和中部一些国家连日来遭遇高温热浪袭击。截至21日，罗马尼亚、奥地利和保加利亚因持续高温造成的死亡人数已达18人。 </ p >
                     </ div >
                     <!--  内容 end  -->
                     <!--  日期 begin  -->
                     < div  id ="date_PN" >
                         < div  id ="date" > 2008年8月8日 星期五 </ div >
                     </ div >
                     <!--  日期 end  -->
                 </ div >
                 <!--  标题正文 end  -->
             </ div >
             < p >
             <!--  图片播放器主体 end  -->
             < script  type ="text/javascript" >
             <!-- // --><![CDATA[//><!--
            ss.pre_update_hook  =   function () {
                sid  =  ss.current;
                title  =  ss.slides[sid].title;
                linkurl  =  ss.slides[sid].link;
                totals  =  ss.slides.length;
                scon  =  ss.slides[sid].con;
                tempid  =  parseInt(sid)  +   1 ;
                document.getElementById( " tt " ).innerHTML  =   ' <a href=" ' + linkurl + ' " target="_blank"> ' + title + ' </a> ' ;
                document.getElementById( " con " ).innerHTML  =  scon;
                 for  ( var  i  =   0 ;i  <  ss.slides.length;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  -->
             < br  />
感谢gway收集整理，转载请注明出处： < a  href ="http://www.jscss8.com/"  target ="_blank" > 网页前端设计吧  </ a > 　＊尊重他人劳动成果，转载请自觉注明出处！ </ p >
             < p  align ="center" ></ p >
             < p  align ="center" ></ p >
             < p  align ="center" ></ p >
             < p > &nbsp; </ p >
</ DIV >
</ body >
</ html >