光线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演示站点击[健身舞]查看。

 

原创粉丝点击