jQuery幻灯插件 Sequence
太叔坚
一个jQuery幻灯插件，可以无限滚动，提供了完整的幻灯功能。和普通幻灯的显示方式与众不同。[url]http://www.sequencejs.com/[/url]
这个功能可以用来显示相册中的照片，正好项目中需要一个这样的功能。所以就下载下来看看呗！demo中的图片都是静态的，但是我想从数据库中获取图片后显示。一开始的时候，还真是遇到了点问题，接下来我就在代码中慢慢的说把！
这个功能可以用来显示相册中的照片，正好项目中需要一个这样的功能。所以就下载下来看看呗！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>
类似资料：