帝国论坛帝国网站管理系统交流区模板/标签/插件共享交流一个JS的幻灯片 【本版专题贴子】  
 1/8     1 2 3 4 5 6 7 8 ›› ›|
主题:一个JS的幻灯片 [加入收藏夹]   

aliang
用户头衔:举人

精华贴   :0
发贴数   :204
经验值   :811
注册时间:2007-05-26
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 1 楼]
一个JS的幻灯片
一个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/

图片在样式表里,自己找一下,从演示地址里可以下载一下

上传以下图片:


[该贴被修改 3 次,最后修改时间 2007-12-03 11:41:02 ]


免费在线看连环画
http://www.xichuinfo.com
壁纸秀
http://desk.xichuinfo.com

2007-12-03 08:37:23 已设置保密 顶部 回复 引用 报告 编辑 删除

furennan
用户头衔:书生

精华贴   :0
发贴数   :611
经验值   :234
注册时间:2006-12-16
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 2 楼]

网站做的不错!!



宁波网站制作 宁波监控 宁波卫星电视
2007-12-03 09:14:16 已设置保密 顶部 回复 引用 报告 编辑 删除

雨雪天气
用户头衔:进士

精华贴   :0
发贴数   :1111
经验值   :3619
注册时间:2006-11-19
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 3 楼]

效果不错 准备试试



很久不更新……

2007-12-03 13:09:21 已设置保密 顶部 回复 引用 报告 编辑 删除

380041548
用户头衔:举人

精华贴   :0
发贴数   :161
经验值   :747
注册时间:2007-08-21
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 4 楼]

支持分享。谢谢




2007-12-03 16:05:46 已设置保密 顶部 回复 引用 报告 编辑 删除

ddc36
用户头衔:举人

精华贴   :0
发贴数   :103
经验值   :858
注册时间:2007-06-07
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 5 楼]

网站打不开



http://www.hhdnw.com
2007-12-04 11:06:02 已设置保密 顶部 回复 引用 报告 编辑 删除

aliang
用户头衔:举人

精华贴   :0
发贴数   :204
经验值   :811
注册时间:2007-05-26
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 6 楼]

可以打开的



免费在线看连环画
http://www.xichuinfo.com
壁纸秀
http://desk.xichuinfo.com

2007-12-04 14:40:40 已设置保密 顶部 回复 引用 报告 编辑 删除

3hoo
用户头衔:举人

精华贴   :0
发贴数   :224
经验值   :1225
注册时间:2006-06-15
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 7 楼]

不错




2007-12-04 14:46:21 已设置保密 顶部 回复 引用 报告 编辑 删除

aliang
用户头衔:举人

精华贴   :0
发贴数   :204
经验值   :811
注册时间:2007-05-26
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 8 楼]

避免出现红叉
<div id="ss_img_div"><a href="javascript:ss.hotlink();"><img id="ss_img" style="filter:blendTrans(Duration=1);" width="255" height="196" src= "随便填写一个有效地址的小图" alt=""/></a></div>



免费在线看连环画
http://www.xichuinfo.com
壁纸秀
http://desk.xichuinfo.com

2007-12-07 11:38:41 已设置保密 顶部 回复 引用 报告 编辑 删除

飞蓝
用户头衔:进士

精华贴   :0
发贴数   :940
经验值   :2994
注册时间:2006-12-04
信息 搜索 好友 发送悄悄话 精益求精-帝国网站管理系统7.5正式版开源发布】   [第 9 楼]

  发现怎么我分享的东西就没人要。。。好象我找的那幻灯片也不错啊




2007-12-07 11:45:07 已设置保密 顶部 回复 引用 报告 编辑 删除

yqzlove
用户头衔:书生

精华贴   :0
发贴数   :44
经验值   :155
注册时间:2007-11-23
信息 搜索 好友 发送悄悄话 免费开源-EBMA系统:更安全的MYSQL管理和备份系统】   [第 10 楼]

好漂亮啊.就是不会弄.




2007-12-07 11:45:21 已设置保密 顶部 回复 引用 报告 编辑 删除
 1/8     1 2 3 4 5 6 7 8 ›› ›|

快速回复
内容

表情
使用EBB代码 使用smile代码 显示签名 自动分析url 自动分析img
     【进入高级模式】   (按 Ctrl+Enter 直接提交)
    顶部  加入收藏夹
关于帝国 | 广告服务 | 联系我们 | 法律声明 | 隐私条款 | 许可协议
Powered by: EBB Version 2.2.1