会python真的可以为所欲为0(回)
370天前
这里还有人吗1(回)
555天前这里还有人吗0(回)
555天前
每天面对着电脑屏幕，敲打键盘。我所面对的并不只是代码，而是一种生活方式。0(回)
779天前到处都是羊，不想上班0(回)
859天前
鸽子
0(回)
864天前
jQuery图片幻灯片播放插件SlideShow（带缩略图）.rar(免费下载)[12 次下载]<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> |
jQuery图片幻灯片播放插件SlideShow（带缩略图）.rar(免费下载)[12 次下载]