[javascript]代码库
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="main.css" type="text/css">
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<title>jQuery图片幻灯片播放插件SlideShow（带缩略图）</title>
</head>
<body>
<br>
<br>
<br>
<div id='wrapper'>
<div id='body'>
<div id="bigPic"> <img src="imgs/1.jpg" alt="" /> <img src="imgs/2.jpg" alt="" /> <img src="imgs/3.jpg" alt="" /> <img src="imgs/4.jpg" alt="" /> <img src="imgs/5.jpg" alt="" /> <img src="imgs/6.jpg" alt="" /> <img src="imgs/7.jpg" alt="" /> <img src="imgs/8.jpg" alt="" /> <img src="imgs/9.jpg" alt="" /> <img src="imgs/10.jpg" alt="" /> </div>
<ul id="thumbs">
<li class='active' rel='1'><img src="imgs/1_thumb.jpg" alt="" /></li>
<li rel='2'><img src="imgs/3_thumb.jpg" alt="" /></li>
<li rel='3'><img src="imgs/4_thumb.jpg" alt="" /></li>
<li rel='4'><img src="imgs/5_thumb.jpg" alt="" /></li>
<li rel='5'><img src="imgs/6_thumb.jpg" alt="" /></li>
<li rel='6'><img src="imgs/7_thumb.jpg" alt="" /></li>
<li rel='7'><img src="imgs/8_thumb.jpg" alt="" /></li>
<li rel='8'><img src="imgs/9_thumb.jpg" alt="" /></li>
<li rel='9'><img src="imgs/10_thumb.jpg" alt="" /></li>
<li rel='10'><img src="imgs/2_thumb.jpg" alt="" /></li>
</ul>
</div>
<div class='clearfix'></div>
</div>
<script type="text/javascript">
var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
if(index < $('#bigPic img').length){
var indexImage = $('#bigPic img')[index]
if(currentImage){
if(currentImage != indexImage ){
$(currentImage).css('z-index',2);
clearTimeout(myTimer);
$(currentImage).fadeOut(250, function() {
myTimer = setTimeout("showNext()", 3000);
$(this).css({'display':'none','z-index':1})
});
}
}
$(indexImage).css({'display':'block', 'opacity':1});
currentImage = indexImage;
currentIndex = index;
$('#thumbs li').removeClass('active');
$($('#thumbs li')[index]).addClass('active');
}
}
function showNext(){
var len = $('#bigPic img').length;
var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
showImage(next);
}
var myTimer;
$(document).ready(function() {
myTimer = setTimeout("showNext()", 3000);
showNext(); //loads first image
$('#thumbs li').bind('click',function(e){
var count = $(this).attr('rel');
showImage(parseInt(count)-1);
});
});
</script>
</body>
</html>
[代码运行效果截图]
[源代码打包下载]
会python真的可以为所欲为0(回)
250天前
这里还有人吗1(回)
435天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
660天前
鸽子
0(回)
744天前
jQuery图片幻灯片播放插件SlideShow（带缩略图）.rar(免费下载)[12 次下载]
