[分享]给大家分享一个横向自适应宽屏的幻灯片帝国cms

帝国论坛 → 帝国网站管理系统交流区 → 模板/标签/插件共享交流 → [分享]给大家分享一个横向自适应宽屏的幻灯片

【本版专题贴子】

1/4 1 2 3 4 ›› ›|

honglin
用户头衔：秀才

精华贴   ：0
发贴数   ：40
经验值   ：347
注册时间：2007-09-14

信息

搜索

好友

发送悄悄话

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

[分享]给大家分享一个横向自适应宽屏的幻灯片

先发上图片效果大家看看

效果我看了后感觉非常不错，所以给大家分享下，顺便将使用方法也写出来，以便我们帝国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]

好了，大家有什么不清楚了可以问我，教程也写的不好，只是个幻灯片分享，呵呵

演示地址：http://www.youzhan5.com/jiaoben/201511/87.html

下载：
大家下载后按照目录结构上传，首页模板按照上面说明修改即可！

[/code][code]

[/html][html]

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

[该贴被修改 1 次，最后修改时间 2015-11-17 15:20:58 ]