[原创]超爽的JS幻灯，想要的进呀！帝国cms

帝国论坛 → 帝国网站管理系统交流区 → 模板/标签/插件共享交流 → [原创]超爽的JS幻灯，想要的进呀！

【本版专题贴子】

1/4 1 2 3 4 ›› ›|

ftqn
用户头衔：书生

精华贴   ：0
发贴数   ：9
经验值   ：113
注册时间：2008-12-19

信息

搜索

好友

发送悄悄话

【精益求精－帝国网站管理系统7.5正式版开源发布】 [第 1 楼]

[原创]超爽的JS幻灯，想要的进呀！

发布个超爽的js幻灯，可以配合页面调整到任意尺寸，不限制图片尺寸自动缩放，兼容IE6.0 7.0 8.0 、firefox2.0 3.0等主流浏览器！

预览：网店商机网

图片预览在二楼

方法：

1、先做两个标签

a、标签一(名字随意)
页面模板内容(*)
[!--empirenews.listtemp--][!--empirenews.listtemp--]
列表内容模板(list.var) (*)
   <div class="img_item">
      <div><a href="[!--titleurl--]" target="_blank"><img src="[!--titlepic--]" width="220" height="198" /></a></div>
      <div class="desc">
      <h5><a href="[!--titleurl--]" target="_blank">[!--title--]</a></h5>
      <p>[!--smalltext--]</p>
      <div><a class="btn_play" href="[!--titleurl--]" target="_blank">
   <span><img src="[!--news.url--]skin/lvbihu/images/dot_blank.gif" /></span>[!--oldtitle--]</a></div>
      </div>
   </div>

b、标签二(名字随意)
页面模板内容(*)
[!--empirenews.listtemp--][!--empirenews.listtemp--]
列表内容模板(list.var) (*)
<li><a href="[!--titleurl--]" target="_blank"><img src="[!--titlepic--]" width="49" height="30" /></a></li>

2、将如下代码置入你要插入幻灯的位置！（温馨提示可以做成“模板变量”，方便修改呀！）
<div class="c-cols-C1 c-section">
<div class="c-colB">

   <div id="img_slide" class="md img_slide">
<div class="cons"><div class="con2">
   [ecmsinfo]'2',7,16,0,12,33,1[/ecmsinfo]万能标签置入（对应标签一）
</div></div>
<div class="ctl_bar">
   <ul class="imgs">
      [ecmsinfo]'2',7,16,0,12,34,1[/ecmsinfo]万能标签置入（对应标签二）
<li class="cur_box"><i></i></li>
   </ul>
</div>
  </div>

</div>
</div>
<script type="text/javascript" src="[!--news.url--]skin/lvbihu/js/bottom_20090512_5.js"></script>

3、修改页面

a、在页面<head></head>处插入如下代码
<script type="text/javascript">(function(){hp_theme_cookiename='hp_theme_id2';hp_layout_lstid_cookiename='hplayout_lstid';hp_layout_lstid_i_cookiename='hplayout_lstid_i';hp_theme_default='blue';get_theme_csspath=function(t){return"/skin/lvbihu/css/theme-"+t+"/theme.css";};var cc,Tp=';',c=hp_theme_cookiename+'=',d=String(document.cookie);for(var e=-1;(e=d.indexOf(c,e+1))>=0;){var f=e;while(--f>=0){var g=d.charAt(f);if(g==Tp){f=-1;break}}
if(f==-1){var h=d.indexOf(Tp,e);if(h<0){h=d.length}
cc=d.substring(e+c.length,h);break}}
if(!cc){cc=hp_theme_default;window.theme_cookie_to_save=cc;}
window.theme_cookie_str=cc;document.write('<link href="'+get_theme_csspath(cc)+'" id="link_for_theme" rel="stylesheet" type="text/css" />');})();</script>
<script type="text/javascript" src="/skin/lvbihu/js/top_20090519.js"></script>

b、在紧挨<body>下插入下面代码
<script>
var wr_Begin_Time = new Date().getTime();
</script>

红色路径部分请根据自己实际情况调整！

如有问题请回贴，我尽量提供帮助！

附件为所需的js和css以及图片文件。

如何调整尺寸：幻灯尺寸调整教程

上传以下附件：
[下载 *.rar](文件大小：30.18 KB,下载次数：222)

[该贴被修改 4 次，最后修改时间 2009-06-08 09:34:54 ]

网店商机网