jQuery幻灯插件 Sequence

一个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> 

你可能感兴趣的:(sequence)