<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JQuery实现的简单幻灯片效果 - 分享JavaScript-sharejs.com</title>
<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */
#stus-slideshow {width:600px; position:relative; height:480px; margin:0 auto;}
#nav {width:372px; height:48px; margin:0 auto;}
#nav img {display:block; float:left; margin:0 5px; display:inline;}
#nav h2 {background:url(trees/image.gif); width:130px; height:48px; line-height:45px; text-align:center; font-family:georgia, serif; color:#000; font-size:18px; font-weight:normal; padding:0; margin:0 5px; float:left; display:inline;}
#slideshow {width:600px; margin-top:10px; border:1px solid #aaa; position:absolute; background:#f8f8f8; padding-bottom:10px;}
#slideshow img {display:block; margin:0 auto;}
#slideshow .entry {width:580px; position:absolute; top:10px; left:10px; display:none;}
#slideshow .entry h1 {background:#f8f8f8; font-size:18px; width:372px; margin:10px auto;}
#slideshow .entry p {background:#f8f8f8; width:372px; margin:0 auto; padding:0; line-height:1.4em;}
</style>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
/* ================================================================
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */
gallery = function() {
var current = 1;
var total = $('.entry').length;
$('.entry').hide();
$('#pic1').fadeIn('slow');
$('#imageNumber').html('1 of ' + total );
setHeight(1)
$('img.first').click(function(){
var prev = 1;
if (current != 1) {
$('#pic' + current).fadeOut('slow');
setHeight(prev)
$('#pic' + prev).fadeIn('slow');
current = 1;
$('#imageNumber').html(current + ' of ' + total)
}
return false;
});
$('img.previous').click(function(){
var prev = current - 1;
if (prev < 1) prev = 1;
if (current != 1) {
$('#pic' + current).fadeOut('slow');
$('#pic' + prev).fadeIn('slow');
current = prev;
setHeight(current)
$('#imageNumber').html(current + ' of ' + total)
}
return false;
});
$('img.next').click(function(){
var next = current + 1;
if (next > total) next = total;
if (current != total) {
$('#pic' + current).fadeOut('slow');
$('#pic' + next).fadeIn('slow');
current = next;
setHeight(current)
$('#imageNumber').html(current + ' of ' + total)
}
return false;
});
$('img.last').click(function(){
var next = total;
if (current != total) {
$('#pic' + current).fadeOut('slow');
$('#pic' + next).fadeIn('slow');
current = total;
setHeight(current)
$('#imageNumber').html(current + ' of ' + total)
}
return false;
});
function setHeight(current) {
var entryHeight = $('#pic' + current).outerHeight() + 20;
$('#slideshow').animate({ height: entryHeight + 'px'}, 500 );
}
}
</script>
</head>
<body onload="gallery()">
<div id="stus-slideshow">
<div id="nav">
<img class="first" src="trees/first.gif" alt="First" />
<img class="previous" src="trees/previous.gif" alt="Previous" />
<h2 id="imageNumber">1 of 3</h2>
<img class="next" src="trees/next.gif" alt="Next" />
<img class="last" src="trees/last.gif" alt="Last" />
</div>
<div id="slideshow">
<div id="pic1" class="entry"><img src="trees/t1.jpg" alt="" />
<h1>Daffodils</h1>
<p>I wander'd lonely as a cloud<br />That floats on high o'er vales and hills,<br />When all at once I saw a crowd,<br />A host, of golden daffodils;</p></div>
<div id="pic2" class="entry"><img src="trees/t2.jpg" alt="" />
<h1>Two trees</h1>
<p>A simple landscape with two trees, grass and sky.sharejs.com</p>
</div>
<div id="pic3" class="entry"><img src="trees/t3.jpg" alt="" />
<h1>Sepia toning</h1>
<p>Using sepia toning to give a misty effect.sharejs.com</p>
</div>
<div id="pic4" class="entry"><img src="trees/t4.jpg" alt="" />
<h1>Five trees</h1>
<p>Five trees in a line against a blue sky.</p>
</div>
<div id="pic5" class="entry"><img src="trees/t5.jpg" alt="" />
<h1>More sepia toning</h1>
<p>Sepia toning to highlight the misty morning.</p>
</div>
<div id="pic6" class="entry"><img src="trees/t6.jpg" alt="" />
<h1>Tall trees</h1>
<p>A vertical shot to emphasise the height of the trees. Converted to greyscale.</p>
</div>
<div id="pic7" class="entry"><img src="trees/t7.jpg" alt="" />
<h1>Barren landscape</h1>
<p>A shot of the moors with trees to break up the plain landscape.</p>
</div>
<div id="pic8" class="entry"><img src="trees/t8.jpg" alt="" />
<h1>The hill</h1>
<p>Trees arranged on the crest of the hill.</p>
</div>
<div id="pic9" class="entry"><img src="trees/t9.jpg" alt="" />
<h1>Blue sky and water</h1>
<p>A vertical shot to show the clear blue sky.</p>
</div>
<div id="pic10" class="entry"><img src="trees/t10.jpg" alt="" />
<h1>Walk in the park</h1>
<p>Autumn colours starting to appear on the trees.</p>
</div>
<div id="pic11" class="entry"><img src="trees/t11.jpg" alt="" />
<h1>Bare trees</h1>
<p>A winter scene with bare branches.</p>
</div>
<div id="pic12" class="entry"><img src="trees/t12.jpg" alt="" />
<h1>Not a tree in sight</h1>
<p>Just to break up the tree images this one is the lady in the red mask.</p>
</div>
<div id="pic13" class="entry"><img src="trees/t13.jpg" alt="" />
<h1>Desert island</h1>
<p>A relaxing scene with simple lines and glorious colours.</p>
</div>
<div id="pic14" class="entry"><img src="trees/t14.jpg" alt="" />
<h1>Woodland path</h1>
<p>A walk down country lanes.</p>
</div>
<div id="pic15" class="entry"><img src="trees/t15.jpg" alt="" />
<h1>A tree in the hand</h1>
<p>Planting a new tree to help the environment.</p>
</div>
<div id="pic16" class="entry"><img src="trees/t16.jpg" alt="" />
<h1>Unusual trees</h1>
<p>Strange upside down trees.</p>
</div>
<div id="pic17" class="entry"><img src="trees/t17.jpg" alt="" />
<h1>Tree trunks</h1>
<p>Silver bark against a golden background.</p>
</div>
<div id="pic18" class="entry"><img src="trees/t18.jpg" alt="" />
<h1>The palm tree</h1>
<p>A palm tree reaching out into the sea.</p>
</div>
<div id="pic19" class="entry"><img src="trees/t19.jpg" alt="" />
<h1>Butterlies</h1>
<p>Tired of trees? then we finish on a couple of lovely butterflies.</p>
</div>
</div>
</div>
<br><br>
<div align="center">
获取更多JavaScript代码，请登录JavaScript分享网 <a href="http://www.sharejs.com">http://www.sharejs.com</a>
</div>
</body>
</html>
jquery-gallary1.rar （26个子文件） 
trees 
t10.jpg 32KB t18.jpg 19KB t19.jpg 16KB t6.jpg 15KB
last.gif 2KB t7.jpg 20KB t5.jpg 10KB t9.jpg 11KB t1.jpg 38KB image.gif 2KB t12.jpg 21KB t11.jpg 10KB t4.jpg 16KB t2.jpg 21KB t15.jpg 12KB t17.jpg 31KB t13.jpg 14KB t3.jpg 33KB t8.jpg 17KB previous.gif 2KB t16.jpg 29KB next.gif 2KB first.gif 2KB t14.jpg 37KB js 
jquery-1.2.6.min.js 54KB
index.html 7KB资源评论
siweikongjian_12012-07-31想学一下jquery技术，通过实例学了一些。- lljjbyl2014-07-02虽然有点简单，但是作者花了时间去完成的，谢谢无私分享！
