光线CMS系统，如何显示幻灯片

     光线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 number
					console.log('animationStart on slide: ', current);
				};
			},
			animationComplete: function(current){
				$('.caption').animate({
					bottom:0
				},200);
				if (window.console && console.log) {
					// example return of current slide number
					console.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演示站点击[健身舞]查看。