<!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虽然有点简单，但是作者花了时间去完成的，谢谢无私分享！
ribbon123
- 粉丝: 1
- 资源: 15
最新资源
- JSP企业人事管理系统设计(源代码+论文)(2024mm).7z
- jsp学生管理系统-毕业设计(2024d5).7z
- jsp物流中心仓储信息管理系统（源代码+论文+开题报告）(2024bm).7z
- jsp书店系统设计（论文）(20246i).7z
- JSP实现的简单旅游管理系统的设计(源代码+论文)(2024yt).7z
- jsp商品进销存系统(2024qm).7z
- JSP在线CD销售系统（论文）(2024g8).7z
- jSP在线教学质量评价系统的设计与实现(源代码+论文)(20242c).7z
- jsp医院病区管理系统(论文+中期检查表+任务书+综合材料）(20242g).7z
- JSP在线考试系统的设计与实现(源代码+论文)(2024c6).7z
- JSP在线学习系统设计(源代码+论文)(2024do).7z
- 空中俯视物体检测6-CreateML数据集合集.rar
- java项目之企业门户网站源代码.zip
- java项目之天下陶网络商城源代码.zip
- java项目之图书馆管理系统项目源代码.zip
- java项目之网络购物中心项目源代码.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
