cms-幻灯片的实现

1.其实幻灯片的后台代码和之前的最新动态和推荐是一样的，只是前台遍历的时候不一样罢了

2.代码：

2.1：帖子mapper查询出幻灯片图片：

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.open1111.dao.ArticleDao">

<resultMap type="Article" id="ArticleResult">
<result property="id" column="id"/>
<result property="title" column="title"/>
<result property="publishDate" column="publishDate"/>
<result property="content" column="content"/>
<result property="summary" column="summary"/>
<result property="titleColor" column="titleColor"/>
<result property="click" column="click"/>
<result property="isRecommend" column="isRecommend"/>
<result property="isSlide" column="isSlide"/>
<result property="keyWords" column="keyWords"/>

<association property="arcType" column="typeId" select="com.open1111.dao.ArcTypeDao.findById"></association>
</resultMap>

<select id="getNewest" resultMap="ArticleResult">
select * from t_article order by publishDate desc limit 0,7
</select>

<select id="getRecommend" resultMap="ArticleResult">
select * from t_article where isRecommend=1 order by publishDate desc limit 0,7
</select>

<select id="getSlide" resultMap="ArticleResult">
select * from t_article where isSlide=1 order by publishDate desc limit 0,5
</select>

</mapper>

2.2：修改mapper同时修改到接口：

package com.open1111.dao;

import java.util.List;

import com.open1111.entity.Article;

/**
* 帖子Dao接口
* @author user
*
*/
public interface ArticleDao {

/**
* 获取最新的7条帖子
* @return
*/
public List<Article> getNewest();

/**
* 获取最新7条推荐的帖子
* @return
*/
public List<Article> getRecommend();

/**
* 获取最新5条幻灯的帖子
* @return
*/
public List<Article> getSlide();
}

2.3.帖子service添加查询幻灯片的方法：

　　

package com.open1111.service;

import java.util.List;

import com.open1111.entity.Article;

/**
* 帖子Service接口
* @author user
*
*/
public interface ArticleService {

/**
* 获取最新的7条帖子
* @return
*/
public List<Article> getNewest();

/**
* 获取最新7条推荐的帖子
* @return
*/
public List<Article> getRecommend();

/**
* 获取最新5条幻灯的帖子
* @return
*/
public List<Article> getSlide();
}

2.4帖子serviceImpl中添加查询幻灯片的方法：

package com.open1111.service.impl;

import java.util.List;

import javax.annotation.Resource;

import org.springframework.stereotype.Service;

import com.open1111.dao.ArticleDao;
import com.open1111.entity.Article;
import com.open1111.service.ArticleService;

/**
* 帖子Service实现类
* @author user
*
*/
@Service("articleService")
public class ArticleServiceImpl implements ArticleService{

@Resource
private ArticleDao articleDao;

public List<Article> getNewest() {
return articleDao.getNewest();
}

public List<Article> getRecommend() {
return articleDao.getRecommend();
}

public List<Article> getSlide() {
return articleDao.getSlide();
}

}

2.5：在静态化组件serviceImpl中把幻灯片数据存入application中

package com.open1111.service.impl;

import java.util.List;

import javax.servlet.ServletContext;
import javax.servlet.ServletContextEvent;
import javax.servlet.ServletContextListener;

import org.springframework.beans.BeansException;
import org.springframework.context.ApplicationContext;
import org.springframework.context.ApplicationContextAware;
import org.springframework.stereotype.Component;

import com.open1111.entity.ArcType;
import com.open1111.entity.Article;
import com.open1111.entity.Link;
import com.open1111.service.ArcTypeService;
import com.open1111.service.ArticleService;
import com.open1111.service.LinkService;

/**
* 初始化组件
* @author user
*
*/
@Component("initComponet")
public class InitComponet implements ApplicationContextAware,ServletContextListener{

private static ApplicationContext applicationContext;

public void setApplicationContext(ApplicationContext applicationContext) throws BeansException {
// TODO Auto-generated method stub
this.applicationContext=applicationContext;
System.out.println(this);
}

/**
* 刷新application缓存方法
* @param application
*/
public void refreshSystem(ServletContext application){
LinkService linkService=(LinkService) applicationContext.getBean("linkService");
List<Link> linkList=linkService.list(null);
application.setAttribute("linkList", linkList);

ArcTypeService arcTypeService=(ArcTypeService) applicationContext.getBean("arcTypeService");
List<ArcType> arcTypeList=arcTypeService.list(null);
application.setAttribute("arcTypeList", arcTypeList);

ArticleService articleService=(ArticleService) applicationContext.getBean("articleService");
List<Article> newestArticleList=articleService.getNewest(); // 获取最新7条帖子
application.setAttribute("newestArticleList", newestArticleList);

List<Article> recommendArticleList=articleService.getRecommend();
application.setAttribute("recommendArticleList", recommendArticleList);

List<Article> slideArticleList=articleService.getSlide();
application.setAttribute("slideArticleList", slideArticleList);

}

public void contextInitialized(ServletContextEvent sce) {
// TODO Auto-generated method stub
ServletContext application=sce.getServletContext();
refreshSystem(application);
}

public void contextDestroyed(ServletContextEvent sce) {
// TODO Auto-generated method stub

}

}

2.6:在页面显示幻灯片效果：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Open1111官方网站 -南通小锋网络科技有限公司</title>
<META NAME="Author" CONTENT="Java1234_小锋老师">
<meta name="keywords"
content="Java内容管理系统,JavaCMS,Java开源,Java爬虫,JavaSEO,Java CMS" />
<meta name="description"
content="Open1111专注于研发Java建站,Java爬虫,JavaSEO教程.传授广大学员用Java技术来实现互联网资源的搬运,整合汇聚互联网资源建站,顺便获取一些搬运费补贴家用." />
<link rel="stylesheet"
href="${pageContext.request.contextPath}/static/css/open1111.css">
<script src="${pageContext.request.contextPath}/static/js/jQuery.js"></script>
</head>
<body>
<jsp:include page="/common/head.jsp"></jsp:include>
<jsp:include page="/common/menu.jsp"></jsp:include>

<div class="content">
<div class="w960">

<div class="left">
<DIV style="width: 330px; height: 228px;" class="tuhuo">
<A href="" target="_blank"><IMG style="width: 330px; height: 208px;" id="fou_img" src=""></A>

<c:forEach var="article" items="${slideArticleList }">
<A href="${pageContext.request.contextPath}/article/${article.id}.html">
<IMG style="display: none;" class="tu_img"
src="${pageContext.request.contextPath}/static/userImages/${article.slideImage}"
width="330" height="208" />
</A>
</c:forEach>

<c:forEach var="article" items="${slideArticleList }">
<P style="height: 20px;" class="tc">
<A href="${pageContext.request.contextPath}/article/${article.id}.html" target="_blank" title="${article.title }">${fn:substring(article.title,0,18) }</A>
</P>
</c:forEach>

<UL>
<LI class="fouce">1</LI>
<LI>2</LI>
<LI>3</LI>
<LI>4</LI>
<LI>5</LI>
</UL>
</DIV>

</div>

<div class="middle">

<div class="data_list">
<div class="dataHeader">最近更新</div>
<div class="datas">
<ul>
<c:forEach var="article" items="${newestArticleList }">
<li><a target="_blank" href="${pageContext.request.contextPath}/article/${article.id}.html"
title="${article.title }">[<fmt:formatDate value="${article.publishDate }" pattern="MM-dd"/>]&nbsp;&nbsp;<font
color="${article.titleColor }">${fn:substring(article.title,0,20) }</font></a></li>
</c:forEach>
</ul>
</div>
</div>

</div>

<div class="right">
<div class="data_list">
<div class="dataHeader">站长推荐</div>
<div class="datas">
<ul>
<c:forEach var="article" items="${recommendArticleList }">
<li><a target="_blank" href="${pageContext.request.contextPath}/article/${article.id}.html"
title="${article.title }"><font color="${article.titleColor }">${fn:substring(article.title,0,16) }</font></a></li>
</c:forEach>

</ul>
</div>
</div>

</div>

<div class="w960 article_row">

<div class="data_list article_list">

<div class="dataHeader">
Java基础<span class="more"><a href="/arcType/1.html">更多...</a></span>
</div>
<div class="datas">
<ul>

<li>[11-05]&nbsp;&nbsp;<a href="/article/72.html"
title="Java基本数据类型-数据类型分类"><font color="">Java基本数据类型-数据类型分类</font></a></li>

<li>[11-05]&nbsp;&nbsp;<a href="/article/71.html"
title="Java中的关键字"><font color="">Java中的关键字</font></a></li>

<li>[11-05]&nbsp;&nbsp;<a href="/article/70.html"
title="Java标识符命名"><font color="">Java标识符命名</font></a></li>

<li>[11-05]&nbsp;&nbsp;<a href="/article/69.html"
title="java注释"><font color="">java注释</font></a></li>

<li>[11-05]&nbsp;&nbsp;<a href="/article/68.html"
title="Java HelloWorld实现及Java运行原理介绍"><font color="#FF0000">Java
HelloWorld实现及</font></a></li>

<li>[11-05]&nbsp;&nbsp;<a href="/article/67.html"
title="Java运行环境搭建之Jdk配置"><font color="#FF0000">Java运行环境搭建之Jdk配置</font></a></li>

<li>[11-05]&nbsp;&nbsp;<a href="/article/66.html"
title="Java简介"><font color="">Java简介</font></a></li>

<li>[11-05]&nbsp;&nbsp;<a href="/article/65.html"
title="Java HelloWorld实现"><font color="">Java
HelloWorld实现</font></a></li>

</ul>
</div>

</div>

<div class="data_list article_list" style="margin-left: 12px">

<div class="dataHeader">
网页基础<span class="more"><a href="/arcType/2.html">更多...</a></span>
</div>
<div class="datas">
<ul>

<li>[11-28]&nbsp;&nbsp;<a href="/article/143.html"
title="css 属性选择器"><font color="">css 属性选择器</font></a></li>

<li>[11-28]&nbsp;&nbsp;<a href="/article/142.html"
title="css 类选择器"><font color="">css 类选择器</font></a></li>

<li>[11-28]&nbsp;&nbsp;<a href="/article/141.html"
title="css id 选择器"><font color="">css id 选择器</font></a></li>

<li>[11-08]&nbsp;&nbsp;<a href="/article/82.html"
title="HTML文本排版"><font color="">HTML文本排版</font></a></li>

<li>[11-08]&nbsp;&nbsp;<a href="/article/81.html"
title="HTML入门程序"><font color="">HTML入门程序</font></a></li>

<li>[11-08]&nbsp;&nbsp;<a href="/article/80.html"
title="Web基础"><font color="">Web基础</font></a></li>

<li>[11-06]&nbsp;&nbsp;<a href="/article/76.html"
title="基本的 HTML 标签"><font color="">基本的 HTML 标签</font></a></li>

<li>[11-06]&nbsp;&nbsp;<a href="/article/75.html"
title="HTML 简介"><font color="">HTML 简介</font></a></li>

</ul>
</div>
</div>

<div class="data_list article_list" style="margin-left: 12px">

<div class="dataHeader">
Java建站<span class="more"><a href="/arcType/4.html">更多...</a></span>
</div>
<div class="datas">
<ul>

<li>[01-24]&nbsp;&nbsp;<a href="/article/86.html"
title="做活动，领取百度云搜索引擎V2.0源码"><font color="#FF0000">做活动，领取百度云搜索引擎V2.0源</font></a></li>

<li>[01-03]&nbsp;&nbsp;<a href="/article/151.html"
title="Tomcat OutOfMemoryError PermGen space 的解决办法"><font
color="">Tomcat OutOfMemory</font></a></li>

<li>[12-04]&nbsp;&nbsp;<a href="/article/147.html"
title="http content-type常见文件格式类型"><font color="">http
content-type常</font></a></li>

<li>[12-04]&nbsp;&nbsp;<a href="/article/145.html"
title="主机"><font color="">主机</font></a></li>

<li>[12-03]&nbsp;&nbsp;<a href="/article/144.html"
title="域名"><font color="">域名</font></a></li>

<li>[11-09]&nbsp;&nbsp;<a href="/article/85.html"
title="解决Url带中文参数乱码问题"><font color="">解决Url带中文参数乱码问题</font></a></li>

<li>[11-09]&nbsp;&nbsp;<a href="/article/84.html"
title="Tomcat多域名配置"><font color="">Tomcat多域名配置</font></a></li>

<li>[11-06]&nbsp;&nbsp;<a href="/article/77.html"
title="如何发布Web项目到互联网"><font color="#FF0000">如何发布Web项目到互联网</font></a></li>

</ul>
</div>
</div>

</div>

<div class="w960 article_row">

<div class="data_list article_list">

<div class="dataHeader">
Java爬虫<span class="more"><a href="/arcType/5.html">更多...</a></span>
</div>
<div class="datas">
<ul>

<li>[01-24]&nbsp;&nbsp;<a href="/article/152.html"
title="做活动，领取Java爬虫-Java包下载网源码"><font color="#FF0000">做活动，领取Java爬虫-Java包</font></a></li>

<li>[12-04]&nbsp;&nbsp;<a href="/article/146.html"
title="透明代理、匿名代理、混淆代理、高匿代理有什么区别？"><font color="">透明代理、匿名代理、混淆代理、高匿代</font></a></li>

<li>[11-21]&nbsp;&nbsp;<a href="/article/140.html"
title="HttpClient HTTP缓存"><font color="">HttpClient
HTTP缓存</font></a></li>

<li>[11-21]&nbsp;&nbsp;<a href="/article/139.html"
title="HttpClient 响应处理"><font color="">HttpClient
响应处理</font></a></li>

<li>[11-21]&nbsp;&nbsp;<a href="/article/138.html"
title="Easy to use facade API"><font color="">Easy
to use facade</font></a></li>

<li>[11-20]&nbsp;&nbsp;<a href="/article/137.html"
title="HttpClient SPNEGO/Kerberos认证"><font color="">HttpClient
SPNEGO/</font></a></li>

<li>[11-20]&nbsp;&nbsp;<a href="/article/136.html"
title="HttpClient NTLM连接持久性"><font color="">HttpClient
NTLM连接持</font></a></li>

<li>[11-20]&nbsp;&nbsp;<a href="/article/135.html"
title="HttpClient NTLM认证"><font color="">HttpClient
NTLM认证</font></a></li>

</ul>
</div>
</div>

<div class="data_list article_list" style="margin-left: 12px">

<div class="dataHeader">
网站SEO<span class="more"><a href="/arcType/6.html">更多...</a></span>
</div>
<div class="datas">
<ul>

<li>[11-08]&nbsp;&nbsp;<a href="/article/83.html"
title="搜索引擎工作原理大体过程"><font color="">搜索引擎工作原理大体过程</font></a></li>

<li>[11-07]&nbsp;&nbsp;<a href="/article/79.html"
title="为什么要做SEO"><font color="">为什么要做SEO</font></a></li>

<li>[11-07]&nbsp;&nbsp;<a href="/article/78.html"
title="什么是SEO"><font color="">什么是SEO</font></a></li>

</ul>
</div>
</div>

<div class="data_list article_list" style="margin-left: 12px">

<div class="dataHeader">
广告联盟<span class="more"><a href="/arcType/7.html">更多...</a></span>
</div>
<div class="datas">
<ul>

<li>[12-18]&nbsp;&nbsp;<a href="/article/150.html"
title="广告联盟推荐-搜狗联盟"><font color="">广告联盟推荐-搜狗联盟</font></a></li>

<li>[12-18]&nbsp;&nbsp;<a href="/article/149.html"
title="广告联盟推荐-谷歌联盟"><font color="#FF0000">广告联盟推荐-谷歌联盟</font></a></li>

<li>[12-18]&nbsp;&nbsp;<a href="/article/148.html"
title="广告联盟推荐-百度联盟"><font color="#FF0000">广告联盟推荐-百度联盟</font></a></li>

<li>[11-19]&nbsp;&nbsp;<a href="/article/121.html"
title="广告联盟推荐-大圣联盟(安徽)"><font color="">广告联盟推荐-大圣联盟(安徽)</font></a></li>

<li>[11-19]&nbsp;&nbsp;<a href="/article/120.html"
title="广告联盟推荐-百游联盟"><font color="">广告联盟推荐-百游联盟</font></a></li>

<li>[11-05]&nbsp;&nbsp;<a href="/article/74.html"
title="广告联盟推荐-七七联盟"><font color="#FF0000">广告联盟推荐-七七联盟</font></a></li>

</ul>
</div>
</div>

</div>

</div>

</div>

<jsp:include page="/common/link.jsp"></jsp:include>

<jsp:include page="/common/foot.jsp"></jsp:include>
</body>
<script type="text/javascript">
var auto;
var index = 0;
$(‘.tuhuo ul li‘).hover(function() {
clearTimeout(auto);
index = $(this).index();
move(index);
}, function() {
auto = setTimeout(‘autogo(‘ + index + ‘)‘, 3000);
});

function autogo() {
if (index < 3) {
move(index);
index++;
} else {
index = 0;
move(index);
index++;
}
}
function move(l) {
var src = $(‘.tu_img‘).eq(index).attr(‘src‘);
$("#fou_img").css({
"opacity" : "0"
});
$(‘#fou_img‘).attr(‘src‘, src);
$(‘#fou_img‘).stop(true).animate({
opacity : ‘1‘
}, 1000);
$(‘.tuhuo ul li‘).removeClass(‘fouce‘);
$(‘.tuhuo ul li‘).eq(index).addClass(‘fouce‘);
$(‘.tuhuo p‘).hide();
$(‘.tuhuo p‘).eq(index).show();
var ao = $(‘.tuhuo p‘).eq(index).children(‘a‘).attr(‘href‘);
$(‘#fou_img‘).parent(‘a‘).attr("href", ao);
}
autogo();
setInterval(‘autogo()‘, 3000);
</script>

</html>

时间： 2024-10-12 19:24:55

cms-幻灯片的实现的相关文章

PHP在yii2中封装SuperSlide 幻灯片编写自己的SuperSlideWidget的例子

因为近期给朋友公司做个门户网站,把荒置了6.7年的PHP又重新拾起,发现PHP这些年兴旺多了,很多新的东西看的不明不白,研究了几个框架ZendFramework.thinkphp.Symfony.yii2,也曾经考虑直接用网上现有的开源cms,要么因为商用授权太贵,要么后台太复杂,要么覆盖行业太多导致业务复杂,看了一通代码,头晕得很,最终选择yii2自己开发个轻量的cms+shop系统,慢慢的做,应该能做出后台简单.有自己特色的网站系统来!一下是我的一些开发过程和经验,因为没有考虑太多的技术和通

[phomeflashpic]怎样调用帝国CMS图片幻灯效果

今天改网站时试着用帝国cms的[phomeflashpic]标签调用图片作为首页幻灯片,默认是[phomeflashpic]0,3,300,235,0,0,13,3[/phomeflashpic],其中第一个0代表栏目id,将其改成幻灯片所在分类的栏目id,刷新首页还是不行. 后来查找了一下标签说明: [phomeflashpic]栏目ID/专题ID,显示总数,图片宽度,图片高度,是否显示标题,标题截取数,操作类型,停顿秒数[/phomeflashpic] 原来是13出现了问题,因为操作类型13

CMS垃圾回收机制

详解CMS垃圾回收机制 原创不易,未经允许,不得转载~~~ 什么是CMS? Concurrent Mark Sweep. 看名字就知道,CMS是一款并发.使用标记-清除算法的gc. CMS是针对老年代进行回收的GC. CMS有什么用? CMS以获取最小停顿时间为目的. 在一些对响应时间有很高要求的应用或网站中,用户程序不能有长时间的停顿,CMS 可以用于此场景. CMS如何执行?  总体来说CMS的执行过程可以分为以下几个阶段: 3.1 初始标记(STW) 3.2 并发标记 3.3 并发预清理

【项目总结：波士顿东大校友会】CMS栏目个性化设置

开发流程完整实现: 1.实体(entity.model) (截取代码省略setter.getter) /** * 类描述:系统栏目实体 * 创建人:周磊 * 创建时间:2013-8-30 下午03:58:50 */ public class ChannelEntity { /** * 初始化信息 */ public static final String ROOT_NAME = "网站系统栏目"; public static final int ROOT_ID = 0; /** *栏目

构建基于Javascript的移动CMS——生成博客(二).路由

在有了上部分的基础之后,我们就可以生成一个博客的内容--BlogPosts Detail.这样就完成了我们这个移动CMS的几乎主要的功能了,有了上节想必对于我们来说要获取一个文章已经不是一件难的事情了. 获取每篇博客 于是我们照猫画虎地写了一个BlogDetail.js define([ 'jquery', 'underscore', 'mustache', 'text!/blog_details.html' ],function($, _, Mustache, blogDetailsTempl

开源 免费 java CMS - FreeCMS1.9 站内信

项目地址:http://www.freeteam.cn/ 站内信 管理站内信数据. 1. 站内信 从左侧管理菜单点击站内信进入. 2. 发送 系统管理员可以直接发送站内信给会员. 点击"发送"按钮. 选择需要发送的会员,输入标题内容后点击"发送"按钮. 3. 查看 在站内信列表中直接点击标题可以查看站内信的详细信息. 4. 删除 选择需要删除的站内信,然后点击"删除"按钮. 提示:同时可以删除多个站内信. 为了防止误操作,系统会提示用户是否删除,

跟大家推荐一个Java领域技术最先进的开源CMS全媒体内容发布平台

雷铭内容管理系统LMCMS 后台CMS+PC官网+微官网+微信公共号+Android新闻客户端+IOS新闻客户端 雷铭CMS后台体验地址:http://lmcms.leimingtech.com/lmcms 用户名:admin 密码:123456 演示站体验地址:http://lmcms.leimingtech.com 这套系统还提供了开放的在线API下面是访问地址: http://lmcms.leimingtech.com/lmcms/docs/docAct.do?index 雷铭CMS公众号

将ppt幻灯片转为Word文档的简单应用

工作之后你就会明白做好ppt的重要性,因为工作中需要制作ppt的时候很多.有时候我们也会遇到要将ppt转换成word的时候, PPT幻灯片文件的应用特别广泛,上学时老师上课会用它辅助讲解,上班后会议室的老板会用它展示他想表达的关键词.同时,不仅可以在计算机上进行演示,也可以在投影仪上演示,也可以把演示文稿打印出来,制作成胶片.如果我们需要将PPT转换成Word,该怎么转换呢? 下面就和大家简单说说转换的步骤. 1.先下载一个pdf转换器,打开下载好的软件,在主页面的左侧需要选择文件类型,这里我们

如何利用CSS3实现完备的幻灯片（1）

概述:我所谓完备的幻灯片,乃指满足下列条件的页面效果: 1.包含左右箭头: 2.左右箭头能无限点击,产生无限循环切换的效果: 2.图片具有滑动效果: 3.包含与图片一一对应,用以切换的选项块: 4.选项块拥有两个状态,其一为普通,其二为「当前」,后者反映其自身与当前显示区的图片具有对应关系,该对应关系必须随时有效: 5.图片自动播放,并无限循环: 6.鼠标进入图片时,图片暂停播放: 7.鼠标离开图片时,图片按当前顺序继续播放,无限循环. 如上,它完备,未必完美. 本着循序渐进的原则,我先从利用c

thinkphp的cms系统研究

cms比较好的: http://www.yfcmf.net/ think.rbac thinkcmf    https://www.thinkcmf.com/ duothink    https://git.coding.net/dantes/duothink.git 一个网建公司的cms  : 测试访问地址:http://test.uzsucai.com/usezan.php账号:usezan.com密码:123456 微信的前端UI:weiui  jquery weiui 不错的前端:lay