光线CMS系统,如何显示幻灯片
来源:互联网 发布:java堆栈信息 编辑:程序博客网 时间:2024/05/14 07:35
光线CMS系统,如何显示幻灯片,有一些朋友用的是光线CMS系统,会发现后台的幻灯片添加了,出不来,那我的站也是这样的,我就自己制作了一个幻灯片效果今天特别分享出来给大家。先看看我的效果:
红色部分就是我制作的幻灯片部分,这个图片只是我测试的图片。
先下载资源包,[点击这里下载资源包],然后解压。
幻灯片的大小是800x280.
将to_template_floder文件夹中的所有文件复制到模板文件夹中(我的是在templete/Default目录下),将jquery.js复制到/views/js/目录下覆盖。
然后将以下代码复制到模板文件夹下/Home/index.html 中的适当位置。例如<include file="header" />代码之后:
<!--slide--><link rel="stylesheet" type="text/css" href="{$tplpath}slide.css" /><script src="{$tplpath}slide.js"></script><script>$(function(){$('#slides').slides({preload: true,preloadImage: '{$tplpath}images/loading.gif',play: 5000,pause: 2500,hoverPause: true,animationStart: function(current){$('.caption').animate({bottom:-35},100);if (window.console && console.log) {// example return of current slide numberconsole.log('animationStart on slide: ', current);};},animationComplete: function(current){$('.caption').animate({bottom:0},200);if (window.console && console.log) {// example return of current slide numberconsole.log('animationComplete on slide: ', current);};},slidesLoaded: function() {$('.caption').animate({bottom:0},200);}});});</script><div class="box" style="background:#e5e5e5;"><div id="container"><div id="example"><img src="{$tplpath}images/new-ribbon.png" width="112" height="112" id="ribbon"><div id="slides"><div class="slides_container"><gxcms name="slide" limit="4" order="oid asc"><div class="slide"><a href="{$slide.link}" title="{$slide.title}" target="_blank"><img src="{$slide.picurl}" alt="{$slide.title}"></a><div class="caption" style="bottom:0"><p><span class="slide_title">{$slide.title}</span>{$slide.content|get_replace_html=0,100}</p></div></div></gxcms></div><a href="#" class="prev"><img src="{$tplpath}images/arrow-prev.png" width="24" height="42" alt="Arrow Prev"></a><a href="#" class="next"><img src="{$tplpath}images/arrow-next.png" width="24" height="42" alt="Arrow Next"></a></div><img src="{$tplpath}images/frame.png" width="900" height="330" alt="Example Frame" id="frame"></div></div></div><!--end.slide-->
这样就行了,DEMO演示站点击[健身舞]查看。
- 光线CMS系统,如何显示幻灯片
- 免费CMS系统的广告如何去掉
- CMS系统
- cms系统
- 插件87:幻灯片显示
- dedecms 织梦cms系统 显示父级栏目名称
- dedecms 织梦cms系统 显示父级栏目名称
- 帝国cms如何实现当前信息页高亮显示
- PowerPoint如何复制幻灯片
- 如何做一个CMS系统之(一 前言)
- 如何学习使用CMS系统进行网站建设?
- 如何选择适合的CMS建站系统
- 如何挑选企业网站cms系统符合SEO要求
- 如何选择适合自己的CMS建站系统
- JavaScript图片幻灯片显示效果
- 图片如幻灯片一样显示
- 图片幻灯片显示效果代码
- Cms系统,cms系统是什么,80端口被封动态IP无公网IP如何发布到外网
- ServletContextListener的用法
- 线程通信的参考代码
- Objective-C 编程语言官网文档(五)-属性的声明
- yaffs文件打包解包工具
- hdoj1166_排兵布阵(线段树、树状数组)
- 光线CMS系统,如何显示幻灯片
- 连通组件标记算法–算法修正版
- 设计模式纵谈--Interpreter,Iterator
- WebService之CXF创建实体服务(CRUD)
- hdoj1754_I Hate It_线段树_单点更新求最值
- 在ubuntu安装PostgreSQL
- Android生命周期
- poj3264_Balanced Lineup_线段树
- java.lang.OutOfMemoryError:Java head space 异常解决办法