一个jQuery幻灯插件，可以无限滚动，提供了完整的幻灯功能。和普通幻灯的显示方式与众不同。
http://www.sequencejs.com/
这个功能可以用来显示相册中的照片，正好项目中需要一个这样的功能。所以就下载下来看看呗！demo中的图片都是静态的，但是我想从数据库中获取图片后显示。一开始的时候，还真是遇到了点问题，接下来我就在代码中慢慢的说把！
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%--这是我自己导入的标签 --%>
<head>
<%--拿过来别人写好的 start --%>
<title>Sequence Theme Demo - Modern Slide In</title>
<link rel="stylesheet" type="text/css" media="screen"
href="../../demo-assets/css/demo-styles.css" />
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" media="screen" href="../../demo-assets/css/demo-styles-ie.css" /><![endif]-->
<link rel="stylesheet" type="text/css" media="screen"
href="css/sequencejs-theme.modern-slide-in.css" />
<!--[if lt IE 8]><link rel="stylesheet" type="text/css" media="screen" href="css/sequencejs-theme.modern-slide-in.ie.css" /><![endif]-->
<link rel='stylesheet' type='text/css'
href='http://fonts.googleapis.com/css?family=Ruluko|Sirin+Stencil'>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
document
.write(unescape("%3Cscript src='scripts/jquery.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>
<script type="text/javascript" src="scripts/sequence.jquery-min.js"></script>
<script type="text/javascript">
//关于下面函数和参数的使用，插件网之中有专门的介绍，我就不多说了。可以自己看一下哈
$(document).ready(
function() {
var options = {
nextButton : ".next",
prevButton : ".prev",
prependNextButton : false,
prependPrevButton : false,
animateStartingFrameIn : true,
delayDuringOutInTransitions : 500,
touchEnabled : false,
afterPreload : function() {
$("#nav").fadeIn(100);
$(
"#nav li:nth-child("
+ (sequence.settings.startingFrameID)
+ ") img").addClass("active");
},
beforeNextFrameAnimatesIn : function() {
$(
"#nav li:not(:nth-child("
+ (sequence.nextFrameID) + ")) img")
.removeClass("active");
$(
"#nav li:nth-child(" + (sequence.nextFrameID)
+ ") img").addClass("active");
}
};
var sequence = $("#sequence").sequence(options)
.data("sequence");
$("#nav li").click(
function() {
if (!sequence.active) {
$(this).children("img").removeClass("active")
.children("img").addClass("active");
sequence.nextFrameID = $(this).index() + 1;
sequence.goTo(sequence.nextFrameID);
}
});
});
</script>
<%--拿过来别人写好的 end --%>
</head>
<body>
<div id="header">
<div class="prev">
<img src="images/bt-prev.png" alt="Previous Frame" />
</div>
<div class="next">
<img src="images/bt-next.png" alt="Next Frame" />
</div>
<div id="sequence">
<ul>
<c:forEach items="${resultList }" var="list" varStatus="status">
<%--重点在这里了，一开始的时候我只是单纯的循环的，是 <img class="model" 虽然有图片，但是并没有出现幻灯的效果。
原来是要第一个默认是出现的，是<img class="model animate-in".
如果照片比较小的话，那么显示的时候就会在左上角显示，不美观。如果设置了照片的大小，就会造成一些小的照片失真。这怎么办呀？
--%>
<c:if test="${status.index ==0}">
<li><img class="model animate-in" height="568px"
width="266px" src="userPhoto.jsp?photoId=${list.id }"
alt="${list.info }" />
</li>
</c:if>
<c:if test="${status.index !=0}">
<li><img class="model" height="568px" width="266px"
src="userPhoto.jsp?photoId=${list.id }" alt="${list.info }" />
</li>
</c:if>
</c:forEach>
</ul>
</div>
<%--这是右下角照片的显示 --%>
<ul id="nav">
<c:choose>
<c:when test="${not empty resultList }">
<c:forEach items="${resultList }" var="list" varStatus="status">
<li><img src="userPhoto.jsp?photoId=${list.id }"
alt="${list.info }" height="95px" width="83px" /></li>
</c:forEach>
</c:when>
</c:choose>
</ul>
</div>
</body>
</html>
分享到：
相关推荐
HTML5全屏自适应幻灯片动画切换插件Sequence.js是一种高效且美观的网页动态展示解决方案，它利用了HTML5的先进技术，为用户提供了一种在全屏模式下流畅切换幻灯片的方式。Sequence.js插件设计的核心是实现内容的...
HTML5幻灯片切换插件Sequence.js是一款专为网页设计者和开发者打造的高效工具，旨在为网站添加具有动态效果的幻灯片展示功能。这款插件基于JavaScript语言，充分利用了HTML5的新特性，提供了丰富的自定义选项和流畅...
总结来说，Sequence.js是一个强大的HTML5幻灯片切换插件，它结合了HTML5、CSS3和jQuery的优点，提供了丰富的功能和高度的可定制性。无论你是前端开发者还是网页设计师，都可以借助Sequence.js轻松创建出富有视觉吸引...
HTML5全屏自适应幻灯片动画切换插件Sequence.js是一个强大的前端开发工具，它结合了HTML5的新特性，jQuery库以及精心设计的CSS样式和JavaScript脚本来实现动态且具有吸引力的幻灯片展示效果。Sequence.js的核心在于...
HTML5幻灯片切换插件Sequence.js是一款专为网页设计者和开发者打造的高效、功能丰富的幻灯片展示工具。这款插件充分利用了HTML5的新特性，提供了左右箭头导航、缩略小图预览以及平滑的淡入淡出切换效果，极大地提升...
《序列图绘制工具sequence-diagram-js的深度解析与应用》 序列图，作为一种重要的系统建模工具，广泛应用于软件设计和开发中，它清晰地展示了系统内各对象间交互的顺序。sequence-diagram-js是一个基于JavaScript的...
6. **API或插件**：如果是一个更复杂的工具，可能提供了API，允许与其他软件（如IDEs）集成，或者有可供扩展的插件系统。 7. **版本更新历史**：3.0.5作为版本号，暗示了可能存在之前的版本。这个版本可能修复了...
这个插件可能扩展了jQuery的功能，提供了更高级的动画选项和定制化设置，比如自动播放、导航箭头、分页器等功能，常用于创建轮播图、幻灯片或产品展示等场景。 在“Sequence-master”这个压缩包文件名中，“master...
**序号图（Sequence Diagram）**是统一建模语言（UML）中的一种图形表示，用于描述系统中对象之间的交互顺序。它清晰地展现了不同对象如何通过消息传递进行通信，以及这些消息的时间顺序。在软件设计和分析阶段，...
《sequence diagram1.4.1插件：在IDEA中绘制序列图的高效工具》 在软件开发过程中，UML（统一建模语言）是一种重要的建模工具，它可以帮助我们清晰地表达系统行为和交互。序列图是UML中的一种图形表示方式，专门...
【jQuery innerfade.js 插件实现文字图片句子淡入淡出切换特效】 在网页设计中，动态效果常常能提升用户体验，使页面更具吸引力。jQuery innerfade.js 插件就是这样一个工具，它允许开发者轻松实现文字、图片、句子...
注意： jQuery Simulate Extended已不再积极开发。 它可能仍然可以工作，但是... bililiteRange.js [如果您想使用jquery.simulate.key-sequence.js或jquery.simulate.key-combo.js ] jquery-xyzjs jquery.simulate.js
"伪代码演示sequence diagram插件使用"这个主题聚焦于如何利用特定插件来创建和理解序列图，通常这在软件设计和开发过程中非常有用。下面将详细阐述序列图的基本概念、用途以及使用插件进行伪代码演示的方法。 序列...
在IT行业中，"Number Sequence"通常指的是在特定系统或应用中用于生成自动递增或递减的数字序列。这些序列可以用于唯一标识记录、订单号、发票号等，确保数据的唯一性和可追踪性。在Microsoft Dynamics AX（现称为...
### Oracle数据库中的Sequence机制详解 #### 一、概述 在Oracle数据库中，`sequence`机制是一种自动生成唯一数值序列的方法，常用于为主键字段提供连续的整数值。它类似于其他数据库系统中的自动增长字段，但在...
### Oracle Sequence 重置(失效恢复) 在进行Oracle数据库移植或维护时，可能会遇到Sequence失效的问题。这种情况通常发生在数据迁移后，原有的Sequence不再与表中的最大值相匹配，导致新记录插入时出现ID冲突或者...
在Activiti中，连线（SequenceFlow）是流程图中的重要元素，用于定义活动之间的转移路径。本篇学习笔记将深入探讨SequenceFlow的概念、作用以及如何在流程设计中使用。 一、SequenceFlow简介 SequenceFlow 是 ...
`enjoyhint`目录可能包含了EnjoyHint插件的相关文件，这是一个jQuery插件，专为实现用户引导而设计。它允许开发者自定义引导过程中的每一步，包括提示文本、提示位置、用户交互等。`css`和`fonts`子目录则分别存储了...