留言中心 | 会员中心 | RSS
迅雪网 logo ad
您当前的位置:首页 > 技术教程

帝国cms首页flash幻灯修改替换

时间:2020-06-13 00:03:23  来源:迅雪网  作者:Admin
帝国cms默认的flash幻灯片非常不好用,如果电脑没装flash插件的甚至都不能显示幻灯片;目前大多数浏览器已经不在支持,所以为了有更好的效果,所有格式的图片都可以在幻灯片中显示,这里帝国cms用js幻灯片替换原来的flash幻灯片。
演示站为本站首页
步骤
一、后台,模板-标签模板-管理标签模板,增加标签模板【首页幻灯片】名字自己随便取
页面模板内容(*):

<div class="wa8_focus" id="wa8_focus01">
<ul>
[!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]
</ul>
</div>
<script>
$(document).ready(function(e) {
var unslider04 = $('#wa8_focus01').unslider({
dots: true
}),
data04 = unslider04.data('unslider');
});
</script>
列表内容模板:
<li><a href="[!--titleurl--]" target="_blank"><img src="[!--titlepic--]" alt="[!--title--]" width="430" height="297" /></a></li>
二、确定新增的标签ID,每个人自己增减不一样,以自己增加的为准。
三、CSS样式增加到文件\skin\default\css\style.css内:

/*首页调用幻灯片*/

.wa8_focus { position: relative; overflow: auto; text-align: center;}

.wa8_focus li { list-style: none; }

.wa8_focus ul li { float: left; }

#wa8_focus01 { width: 440px;}

#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;

}
/*首页调用幻灯片*/
四、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:
原焦点图片调用为:[phomeflashpic]0,3,450,250,0,0,13,3[/phomeflashpic]
现在修改后的调用: [ecmsinfo]1,5,18,0,0,13,1[/ecmsinfo] 

七、完工。
[ 下载地址:unslider.min.js ]
版权声明:本站仅提供学习的平台,所有资料均来自于网络,版权归原创者所有!并且以计算机技术研究交流为目的,仅供大家参考、学习,不存在任何商业目的与商业用途。本站不提供任何技术, 并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。
查看评论
返回首页
热门推荐
  • Nginx防盗链的配置
  • 虎牙直播解析视频算法
  • MTProxy-Bash: MTProxy 一键搭建管理脚本
  • 帝国cms如何在内容页播放视频
  • 帝国cms首页flash幻灯修改替换
  • SEO关键词排名优化教程
  • 帝国CMS二次开发入门教程
  • 帝国cms首页flash幻灯修改替换
  • 帝国cms如何在内容页播放视频
  • MTProxy-Bash: MTProxy 一键搭建管理脚本