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

  • 相关阅读:
    MVC ORM 架构
    Kubernetes 第八章 Pod 控制器
    Kubernetes 第七章 Configure Liveness and Readiness Probes
    Kubernetes 第六章 pod 资源对象
    Kubernetes 第五章 YAML
    Kubernetes 核心组件
    Kubernetes 架构原理
    Kubernetes 第四章 kubectl
    Kubernetes 第三章 kubeadm
    yum 配置及yum 源配置
  • 原文地址:https://www.cnblogs.com/raphael5200/p/5114865.html
Copyright © 2011-2022 走看看