jQuery相册
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<style type="text/css">
/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial, Helvetica, sans-serif; margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
.clearfloat{height:0;font-size:1px;clear:both;line-height:0;}
#container{ width:650px; text-align:left; margin:20px auto; }
a{color:#333;text-decoration:none;}
a:hover{color:#ef9b11; text-decoration:underline;}
.left{ width:420px; float:left;}
.left h3{ font-size:18px; padding-bottom:8px; font-weight:normal;}
.s-t{ width:100%; padding-bottom:10px;}
.s-c{ width:100%;}
.s-c h4{ font-size:14px; font-weight:normal; padding-bottom:9px;}
.s-c .pics{ width:107px; float:left;}
.s-c .p1 img{ width:100%;}
.s-c .s-detail{ width:285px; float:left; display:inline; margin-left:7px;}
.cnt{ text-indent:2em; line-height:18px;}
.right{ width:180px; float:left; BACKGROUND: #f3f3f3;}
.slide-pic { padding:10px 0px 10px 15px; HEIGHT: auto}
.slide-pic A#prev {DISPLAY: block; BACKGROUND: url(images/slide.png) no-repeat; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 150px; TEXT-INDENT: -9999em; HEIGHT: 14px; outline: none}
.slide-pic A#next {DISPLAY: block; BACKGROUND: url(images/slide.png) no-repeat; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 150px; TEXT-INDENT: -9999em; HEIGHT: 14px; outline: none}
.slide-pic A#prev {BACKGROUND-POSITION: center 0px}
.slide-pic A#next {BACKGROUND-POSITION: center -20px}
.slide-pic A#prev:hover {BACKGROUND-POSITION: center -40px}
.slide-pic A#next:hover {BACKGROUND-POSITION: center -60px}
.slide-pic A.gray#prev {BACKGROUND-POSITION: center -80px}
.slide-pic A.gray#next {BACKGROUND-POSITION: center -100px}
.slide-pic .pic-container {MARGIN: 5px 0px; OVERFLOW: hidden; WIDTH: 150px; HEIGHT: 300px}
.slide-pic UL {WIDTH: 150px}
.slide-pic UL LI {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 5px; CURSOR: pointer; PADDING-TOP: 5px
}
.slide-pic UL LI P {BORDER-RIGHT: #fff 5px solid; BORDER-TOP: #fff 5px solid; OVERFLOW: hidden; BORDER-LEFT: #fff 5px solid; WIDTH: 140px; BORDER-BOTTOM: #fff 5px solid; HEIGHT: 80px}
.slide-pic UL LI.hover P {BORDER-LEFT-COLOR: #bbbbbb; BORDER-BOTTOM-COLOR: #bbbbbb; BORDER-TOP-COLOR: #bbbbbb; BORDER-RIGHT-COLOR: #bbbbbb}
.slide-pic UL LI P IMG {WIDTH: 140px; HEIGHT: 80px}
.slide-pic UL LI.cur P {BORDER-LEFT-COLOR: #2c2c2c! important; BORDER-BOTTOM-COLOR: #2c2c2c! important; BORDER-TOP-COLOR: #2c2c2c! important; BORDER-RIGHT-COLOR: #2c2c2c! important}
.slide-pic UL LI .date {MARGIN-TOP: -20px; DISPLAY: block; Z-INDEX: 1; BACKGROUND: #5a5a5a; WIDTH: 140px; COLOR: #fff; LINE-HEIGHT: 20px; POSITION: static; HEIGHT: 20px; TEXT-ALIGN: center}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</HEAD>
<BODY>
<div id="container">
<div class="left">
<DIV class="s-c">
<DIV class="s-main">
<DIV class="pics">
<P class="p1"><a href=""><img id=dailyImage src="images/1278306844-293.jpg"></a></P>
</DIV>
</DIV>
</div>
</div>
<DIV class="right">
<DIV class="slide-pic" id=slidePic>
<A class="gray" id=prev hideFocus href="javascript:;">前移</A>
<DIV class="pic-container">
<UL>
<LI class="cur">
<P><IMG src="images/1278306844-293.jpg"> <SPAN
class="date">2010-07-09</SPAN> </P>
<LI class="">
<P><IMG src="images/1278066548-532.jpg"> <SPAN
class="date">2010-07-08</SPAN> </P>
<LI class="">
<P><IMG src="images/1278066264-139.jpg"> <SPAN
class="date">2010-07-07</SPAN> </P>
<LI class="">
<P><IMG src="images/1276251116-227.jpg"> <SPAN
class="date">2010-07-06</SPAN> </P>
<LI class="">
<P><IMG src="images/1278573723-964.jpg"> <SPAN
class="date">2010-07-05</SPAN> </P></LI>
</UL>
</DIV>
<A id=next hideFocus href="javascript:;">后移</A>
</DIV>
<SCRIPT type=text/javascript>
var areaDailyList = [{image:"images/1278306844-293.jpg"},{image:"images/1278573723-964.jpg"},{image:"images/1278306844-293.jpg"},{image:"images/1278573723-964.jpg"},{image:"images/1278306844-293.jpg"}];
jQuery(function(){
if (!$('#slidePic')[0])
return;
var i = 0, p = $('#slidePic ul'), pList = $('#slidePic ul li'), len = pList.length;
var elePrev = $('#prev'), eleNext = $('#next');
var w = 100, num = 3;
p.css('width',w*len);
if (len <= num)
eleNext.addClass('gray');
function prev(){
if (elePrev.hasClass('gray')) {
return;
}
p.animate({
marginTop:-(--i) * w
},500);
if (i < len - num) {
eleNext.removeClass('gray');
}
if (i == 0) {
elePrev.addClass('gray');
}
}
function next(){
if (eleNext.hasClass('gray')) {
return;
}
p.animate({
marginTop:-(++i) * w
},500);
if (i != 0) {
elePrev.removeClass('gray');
}
if (i == len - num) {
eleNext.addClass('gray');
}
}
elePrev.bind('click',prev);
eleNext.bind('click',next);
pList.each(function(n,v){
$(this).click(function(){
if(n-i == 2){
next();
}
if(n-i == 0){
prev()
}
$('#slidePic ul li.cur').removeClass('cur');
$(this).addClass('cur');
show(n);
}).mouseover(function(){
$(this).addClass('hover');
}).mouseout(function(){
$(this).removeClass('hover');
})
});
function show(i){
$('#dailyImage').attr('src',areaDailyList[i].image);
}
});
</SCRIPT>
</DIV>
</div>
</body>
</html>
浙公网安备 33010602011771号