加入收藏 | 设为首页
爱江湖网站LOGO
您当前的位置:首页 > 学习笔记 > 应用程序

帝国CMS首页采用JS+CSS+DIV替换flash轮播图

发布时间:2024-10-20  Ecms

Empire CMS7.2和7.5均支持全新的纯JS+CSS+DIV首页焦点渲染:包括Google Chrome在内的很多浏览器将不再支持Flash,所以最好尽早更换。

一、后台,模板-标签模板-管理标签模板,增加标签模板【首页幻灯片】名字自己随便取

页面模板内容(*):

<div class="wa8_focus" id="wa8_focus01">
    <ul>
      [!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]
</ul>
    <a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="[!--news.url--]skin/default/images/arrowl.png" alt="prev" width="20" height="35"></a>
    <a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="[!--news.url--]skin/default/images/arrowr.png" alt="next" width="20" height="35"></a>
</div>
<script>
$(document).ready(function(e) {
    var unslider04 = $('#wa8_focus01').unslider({
dots: true
}),
data04 = unslider04.data('unslider');
$('.unslider-arrow04').click(function() {
        var fn = this.className.split(' ')[1];
        data04[fn]();
    });
});
</script>

列表内容模板

<li><a href="[!--titleurl--]" target="_blank"><img src="[!--titlepic--]" alt="[!--title--]" width="450" height="250" /></a></li>

二、确定新增的标签ID,每个人自己增减不一样,以自己增加的为准。

三、CSS样式增加到文件\skin\default\css\style.css内:

/* 首页js焦点图 */
.wa8_focus { position: relative; overflow: auto; text-align: center;}
.wa8_focus li { list-style: none; }
.wa8_focus ul li { float: left; }
#wa8_focus01 { width: 450px;}
#wa8_focus01 .dots { position: absolute; left: 0; right: 0; bottom: 20px;}
#wa8_focus01 .dots li
{
display: inline-block;
width: 10px;
height: 10px;
margin: 0 4px;
text-indent: -999em;
border: 2px solid #fff;
border-radius: 6px;
cursor: pointer;
opacity: .4;
-webkit-transition: background .5s, opacity .5s;
-moz-transition: background .5s, opacity .5s;
transition: background .5s, opacity .5s;
}
#wa8_focus01 .dots li.active
{
background: #fff;
opacity: 1;
}
#wa8_focus01 .arrow { position: absolute; top: 130px;}
#wa8_focus01 #al { left: 15px;}
#wa8_focus01 #ar { right: 15px;}

四、两个箭头的图片文件,自己做或者到网站http://www.aijh.net自行右键另存为,放置在skin\default\images文件夹上传。

五、js文件增加两个文件到skin\default\js\jquery-3.3.1.min.js、unslider.min.js,自己百度搜索下载。

六、首页模板增加内容:

<script type="text/javascript" src="[!--news.url--]skin/default/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="[!--news.url--]skin/default/js/unslider.min.js"></script>

七、焦点图位置替换为,其中的13为第二点内你自己的标签模板的ID:

原焦点图片调用

现在修改后的调用

单引号内的55,56,57等是你的栏目ID,5是调用图片个数,18是标题长度,13是模板ID

来顶一下
返回首页
返回首页
上一篇
返回列表
下一篇
帝国CMS内容页实现图片自适应大小
发表评论 共有条评论
验证码: 匿名发表
推荐资讯
元宇宙之侠剑江湖游
元宇宙之侠剑江湖游
什么是江湖 - 江湖遐想
什么是江湖 - 江湖遐
如果每一只江湖怪物,都爱着一个玩家
如果每一只江湖怪物,都
解除卡、陷害卡、捣乱卡、吸血虫满大厅砸
解除卡、陷害卡、捣乱
相关文章
    无相关信息
栏目更新
栏目热门