zoukankan      html  css  js  c++  java
  • 光线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演示站点击[健身舞]查看。

  • 相关阅读:
    spring 任务调度quartz
    java增强型for循环
    DateTimeFormat
    Java的同步和异步
    HTTP Status 400,400 (Bad Request)
    com.mysql.jdbc.exceptions.jdbc4.MySQLDataException: '2.34435678977654336E17' in column '3' is outside valid range for the datatype INTEGER.
    Servlet.service() for servlet [appServlet] in context with path [/item] threw exception [Request processing failed
    mysql调优
    Windows nexus 启动失败
    NFS客户端访问行为相关的几个参数解释
  • 原文地址:https://www.cnblogs.com/raphael5200/p/5114865.html
Copyright © 2011-2022 走看看