jQuery上下自动切换图片相册特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery上下自动切换图片相册特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Start/Stop Slider</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8" />
	<script type="text/javascript" src="js/jquery-1.2.6.js"></script>
	<script type="text/javascript" src="js/startstop-slider.js"></script>
	
</head>

<body>

	<div id="page-wrap">
		
		<h2>Start/Stop Slider</h2>
		
		<div id="slider">

			<div id="mover">
		
				<div id="slide-1" class="slide">
				
					<h1>Garden Rack</h1>
					
					<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
					
					<a href="#"><img src="images/slide-1-image.png" alt="learn more" /></a>
					
				</div>
				
				<div class="slide">
				
					<h1>Tulip Bulbs</h1>
					
					<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
					
					<a href="#"><img src="images/slide-2-image.png" alt="learn more" /></a>
					
				</div>
				
				<div class="slide">
				
					<h1>Garden Gloves</h1>
					
					<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
					
					<a href="#"><img src="images/slide-3-image.png" alt="learn more" /></a>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

JS代码(startstop-slider.js):

// SET THIS VARIABLE FOR DELAY,1000 = 1 SECONDvar delayLength = 4000;
	function doMove(panelWidth,tooFar){
	var leftValue = $("#mover").css("left");
	// Fix for IEif (leftValue == "auto"){
	leftValue = 0;
}
;
	var movement = parseFloat(leftValue,10) - panelWidth;
	if (movement == tooFar){
	$(".slide img").animate({
	"top":-200}
,function(){
	$("#mover").animate({
	"left":0}
,function(){
	$(".slide img").animate({
	"top":20}
);
}
);
}
);
}
else{
	$(".slide img").animate({
	"top":-200}
,function(){
	$("#mover").animate({
	"left":movement}
,function(){
	$(".slide img").animate({
	"top":20}
);
}
);
}
);
}
}
$(function(){
	var $slide1 = $("#slide-1");
	var panelWidth = $slide1.css("width");
	var panelPaddingLeft = $slide1.css("paddingLeft");
	var panelPaddingRight = $slide1.css("paddingRight");
	panelWidth = parseFloat(panelWidth,10);
	panelPaddingLeft = parseFloat(panelPaddingLeft,10);
	panelPaddingRight = parseFloat(panelPaddingRight,10);
	panelWidth = panelWidth + panelPaddingLeft + panelPaddingRight;
	var numPanels = $(".slide").length;
	var tooFar = -(panelWidth * numPanels);
	var totalMoverwidth = numPanels * panelWidth;
	$("#mover").css("width",totalMoverwidth);
	$("#slider").append('<a href="#" id="slider-stopper">Stop</a>');
	sliderIntervalID = setInterval(function(){
	doMove(panelWidth,tooFar);
}
,delayLength);
	$("#slider-stopper").click(function(){
	if ($(this).text() == "Stop"){
	clearInterval(sliderIntervalID);
	$(this).text("Start");
}
else{
	sliderIntervalID = setInterval(function(){
	doMove(panelWidth,tooFar);
}
,delayLength);
	$(this).text("Stop");
}
}
);
}
);

CSS代码(style.css):

*{margin:0;padding:0;}
body{font-family:"Lucida Grande",Arial,Sans-Serif;background:#222;}
a{text-decoration:none;outline:none;}
a img{border:none;}
h2{font-family:Georgia,Serif;font-size:36px;text-align:center;font-weight:normal;}
#page-wrap{background:white;width:960px;margin:0 auto;padding:50px 0;}
#slider{background:white url(../images/slider-bg.jpg);height:227px;overflow:hidden;position:relative;margin:50px 0;}
/* DEFAULT is for three panels in width,adjust as needed This only matters if JS is OFF,otherwise JS sets this. */
#mover{width:2880px;position:relative;}
.slide{padding:40px 30px;width:900px;float:left;position:relative;}
.slide h1{font-family:Helvetica,Sans-Serif;font-size:30px;letter-spacing:-1px;color:#ac0000;}
.slide p{color:#999;font-size:12px;line-height:22px;width:300px;}
.slide img{position:absolute;top:20px;left:400px;}
#slider-stopper{position:absolute;top:1px;right:20px;background:#ac0000;color:white;padding:3px 8px;font-size:10px;text-transform:uppercase;z-index:1000;}

附件:下载该文件资源,减少时间成本(增值服务)