Jquery 滚动图片
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ScrollJquery._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Jquery Scroll</title>
<script type='text/javascript' src='jquery-1.2.6.min.js'></script>
<script type="text/javascript" src="jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="jquery.serialScroll-min.js"></script>
<script type="text/javascript">
jQuery.easing.easeOutQuart = function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
};
jQuery(function(){
$('#slideshow').serialScroll({
items:'li',
prev:'#screen2 a.prev',
next:'#screen2 a.next',
start:0, //as we are centering it, start at the 2nd
duration:2000,
force:true,
interval:1,
cycle:true, //don't pull back once you reach the end
jump:true,
interval:5000
});
}
);
</script>
<style type="text/css">
#screen2
{
position: relative;
width: 300px;
margin: 20px;
}
#screen2 #buttons
{
border: 1px solid #777;
margin-bottom: 5px;
width: 300px;
}
#screen2 #buttons a
{
margin: 10px 10px;
color: #69C;
}
#screen2 .prev
{
float: left;
}
#screen2 .next
{
float: right;
}
#slideshow
{
overflow: hidden;
width: 300px;
border: 1px solid #777;
}
#slideshow ul
{
width: 900px;
padding-left: 0px;
margin: 0px;
}
#slideshow li
{
float: left;
cursor: pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="screen2">
<div id="buttons">
<a class="prev" href="#">Previous</a> <a class="next" href="#">Next</a>
</div>
<div id="slideshow">
<ul>
<li>
<img width="300" height="500" src="abstract_colors_Galeor.jpg" />
</li>
<li>
<img width="300" height="500" src="Palawan Island Philippines.jpg" />
</li>
<li>
<img width="300" height="500" src="Peaceful Getaway Maldives.jpg" />
</li>
</ul>
</div>
</div>
</form>
</body>
</html>
