帝国cms横向自适应宽屏的幻灯片
| 经营范围：电脑组装，电脑维修，智能家居设备，苹果电脑系统安装，苹果手机刷机，监控安装，媒体编辑，数据恢复，复印打印，网站制作等 |
效果我看了后感觉非常不错，所以给大家分享下，顺便将使用方法也写出来，以便我们帝国emcs的模板和这个幻灯片更好的使用
该效果代码一共两个js文件，jquery.js和superslide.2.1.js
css代码为
|
<style type="text/css"> * { margin:0; padding:0; list-style:none; } body { background:#fff; font:normal 12px/22px 宋体; width:100%; } img { border:0; } a { text-decoration:none; color:#333; } a:hover { color:#1974A1; } #footer { text-align:center; } .fullSlide { width:100%; position:relative; height:410px; background:#000; } .fullSlide .bd { margin:0 auto; position:relative; z-index:0; overflow:hidden; } .fullSlide .bd ul { width:100% !important; } .fullSlide .bd li { width:100% !important; height:410px; overflow:hidden; text-align:center; } .fullSlide .bd li a { display:block; height:410px; } .fullSlide .hd { width:100%; position:absolute; z-index:1; bottom:0; left:0; height:30px; line-height:30px; } .fullSlide .hd ul { text-align:center; } .fullSlide .hd ul li { cursor:pointer; display:inline-block; *display:inline; zoom:1; width:42px; height:11px; margin:1px; overflow:hidden; background:#000; filter:alpha(opacity=50); opacity:0.5; line-height:999px; } .fullSlide .hd ul .on { background:#f00; } .fullSlide .prev,.fullSlide .next { display:block; position:absolute; z-index:1; top:50%; margin-top:-30px; left:15%; z-index:1; width:40px; height:60px; background:url(images/slider-arrow.png) -126px -137px #000 no-repeat; cursor:pointer; filter:alpha(opacity=50); opacity:0.5; display:none; } .fullSlide .next { left:auto; right:15%; background-position:-6px -137px; }
</style> |
大家可以直降将css复制到首页模板上，也可以自己建立css文件然后加载
首页幻灯片加载代码
|
<div class="fullSlide"> <div class="bd"> <ul> <li _src="url(images/1.jpg)" style="background:#E2025E center 0 no-repeat;"><a target="_blank" href="http://www.youzhan5.com"></a></li> <li _src="url(images/2.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a target="_blank" href="http://www.youzhan5.com"></a></li> <li _src="url(images/3.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a target="_blank" href="http://www.youzhan5.com"></a></li> <li _src="url(images/4.jpg)" style="background:#98918E center 0 no-repeat;"><a target="_blank" href="http://www.youzhan5.com"></a></li> <li _src="url(images/5.jpg)" style="background:#FEFF19 center 0 no-repeat;"><a target="_blank" href="http://www.youzhan5.com"></a></li> </ul> </div> <div class="hd"> <ul> </ul> </div> <span class="prev"></span> <span class="next"></span> </div> <script type="text/javascript"> jQuery(".fullSlide").hover(function() { jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5) }, function() { jQuery(this).find(".prev,.next").fadeOut() }); jQuery(".fullSlide").slide({ titCell: ".hd ul", mainCell: ".bd ul", effect: "fold", autoPlay: true, autoPage: true, trigger: "click", startFun: function(i) { var curLi = jQuery(".fullSlide .bd li").eq(i); if ( !! curLi.attr("_src")) { curLi.css("background-image", curLi.attr("_src")).removeAttr("_src") } } }); </script> |
中间的这些就是我们需要自己根据网站用标签写的，很简单了，想必大家都会，制作列表模板，更换图片地址和网址即可！
|
<li _src="url(images/1.jpg)" style="background:#E2025E center 0 no-repeat;"><a target="_blank" href="http://www.youzhan5.com"></a></li> <li _src="url(images/2.jpg)" style="background:#DED5A1 center 0 no-repeat;"><a target="_blank" href="http://www.youzhan5.com"></a></li> <li _src="url(images/3.jpg)" style="background:#B8CED1 center 0 no-repeat;"><a target="_blank" href="http://www.youzhan5.com"></a></li> <li _src="url(images/4.jpg)" style="background:#98918E center 0 no-repeat;"><a target="_blank" href="http://www.youzhan5.com"></a></li> <li _src="url(images/5.jpg)" style="background:#FEFF19 center 0 no-repeat;"><a target="_blank" href="http://www.youzhan5.com"></a></li> |
大家可以用灵动标签实现这个
|
[e:loop={栏目ID/专题ID,显示条数,操作类型,只显示有标题图片,附加SQL条件,显示排序}] <li _src=src="<?=$bqr[titlepic]?>" style="background:#FEFF19 center 0 no-repeat;"><a target="_blank" href="<?=$bqsr[titleurl]?>"></a></li> [/e:loop] |
