一个JS的幻灯片
演示地址 http://www.xichuinfo.com/ComicStripClass/
图片在样式表里,自己找一下,从演示地址里可以下载一下
样式表
<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:560px; height:248px; overflow:hidden; border:0px #BDCBD7 solid; padding:1px 3px 0 1px;} #ImgBlk{width:257px; height:235px; background: #E9F0F7; padding:13px 12px 0 11px; float:left;} #ss_img_div{width:257px; height:198px; overflow:hidden;} #ss_img_div img{border:1px #000 solid;} #ImgNum{height:37px; overflow:hidden;} #ImgNum ul{width:187px; 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/lhh_pic_001.gif) no-repeat bottom; color:#000;} #ImgNum li.itemOff:hover{color:#A80000;} #ImgNum li.itemOn{background:url(../images/lhh_pic_002.gif) no-repeat bottom; color:#A80000; font-weight:bold; height:25px; line-height:25px; padding:6px 0 0 0;} #ImgNum div{float:left; width:66px; 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/lhh_pic_003.gif) no-repeat bottom right;} #Pause{background:url(../images/lhh_pic_004.gif) no-repeat bottom right;} #TxtBlk{width:282px; float:left;} #Txt{padding:15px 10px 0 10px; text-align:left; height:233px; border:1px #D7E5F5 solid; border-left:none; background:url(../images/lhh_pic_005.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;}
/*播放器样式 20070510 修改 lmy 结束*/
--> </style>
幻灯片
<DIV align="center"> <!-- 播放器 begin --> <script type="text/javascript" src="http://www.xichuinfo.com/js/imgplayer1.js"></script> <script type="text/javascript" language="javascript"> //内容部分 ss = new slideshow("ss"); ss.prefetch = 1; ss.sizelmt = true; ss.repeat = true;
[ecmsinfo]'selfinfo',5,28,0,0,13,0[/ecmsinfo]
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="255" height="196" 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> </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"></p> </div> <!-- 内容 end --> </div> <!-- 标题正文 end --> </div> <!-- 图片播放器主体 end --> <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; 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 --> </DIV>
万能标签
标签模板
[!--empirenews.listtemp--] <!--list.var1--> [!--empirenews.listtemp--]
s = new slide(); s.src= "[!--titlepic--]"; s.title = "[!--title--]"; s.link = "[!--titleurl--]"; s.con = "[!--smalltext--]...<a href='[!--titleurl--]' target='_blank'>[阅读]</a>"; ss.add_slide(s);
演示地址 http://www.xichuinfo.com/ComicStripClass/
图片在样式表里,自己找一下,从演示地址里可以下载一下
上传以下图片:
|