CSS + jquery下面的小图片显示，上面的大图片不显示

arvat 2012-03-31 01:19:22

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
*{outline:none;}
html{
min-height: 100%; /*Sets the min height to the
height of the viewport.*/
width: 100%;
height: 100%; /*Effectively, this is min height
for IE5+/Win, since IE wrongly expands
an element to enclose its content.
This mis-behavior screws up modern
browsers*/
margin: 0;
padding: 0;
}
BODY
{
font-family:Verdana,Arial,sans-serif,;
color:#444444;
font-size:62.5%;
min-height: 100%; /*Sets the min height to the
height of the viewport.*/
width: 100%;
height: 100%; /*Effectively, this is min height
for IE5+/Win, since IE wrongly expands
an element to enclose its content.
This mis-behavior screws up modern
browsers*/
margin: 0;
padding: 0;
background-image:url('bg.gif');
}
/* thumbnail list */

/* // thumbnail list */

#header{
height:100px;
background:transparent url(slideshow.png) no-repeat 50% 16px ;
}

#footer{
height: 43px; /* .push must be the same height as .footer */
padding-top:10px;
/*border-top:1px solid black; */
width:979px;
margin:0pt auto 0px;
}
#footer div p{
width:979px;
}

#push {
height: 43px; /* .push must be the same height as .footer */
padding-top:10px;
}
#wrapper{
width:979px;
min-height: 96%;
height: auto !important;
height: 96%;
text-align:left;
margin: 0 auto -30px;
padding:0 10px 0px 10px;
}

.clearfix{
clear:both;
float:none;
}
#bigPic{
width:940px;
height:300px;
padding:1px;
border:1px solid #CCC;
background-color:#FFF;
margin-bottom:10px;
}
#bigPic img{
position:absolute;
display:none;
}
ul#thumbs li.active{
border:2px solid #000;
background:#fff;
padding:2px;
}
ul#thumbs, ul#thumbs li{
margin:0;
padding:0;
list-style:none;
}

ul#thumbs li{
float:left;
margin-right:7px;
margin-bottom:5px;
border:1px solid #CCC;
padding:3px;
cursor:pointer;
}
ul#thumbs img{
float:left;
width:80px;
height:80px;
line-height:80px;
overflow:hidden;
position:relative;
z-index:1;
}

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="india, travel, adventure, bookmarking"/>
<meta name="description" content="This is site ment for indian travellers." />

<link rel="stylesheet" href="main.css" type="text/css">
<script type="text/javascript" src="../jquery-1.4.1.js"></script>
<title>Simple Slideshow : Using Jquery</title>

</head>
<body>
<div id='wrapper'>
<div id='header'></div>
<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 id='push'></div>
</div>

<div id='footer'><div><p>asdf</p></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>

大小图片在一个文件夹里

...全文