jquery實現簡單易懂的圖片展示小例子

2019-11-20 21:36:55

字體：大中小

來源：轉載

供稿：網友

HTML代碼：

 
<body> 
<div style="overflow:hidden;width:360px;height:225px;position:absolute;top:30px;" id="div"> 
<div style="width: 360px; height: 900px; position: relative;" id="imgCon"> 
<img src="img/1.jpg" id="img0"/> 
<img src="img/2.jpg" id="img1"/> 
<img src="img/3.jpg" id="img2"/> 
<img src="img/1a.jpg" id="img3"/> 
<img src="img/1.jpg"/> 
</div> 
</div> 
<div class="box" num="0" id="box0" style="color:red;">1</div> 
<div class="box" num="1" id="box1">2</div> 
<div class="box" num="2" id="box2">3</div> 
<div class="box" num="3" id="box3">4</div> 
</body> 

JS代碼：

復制代碼代碼如下:

 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("#box0").click(function(){ 
//$("#imgCon").slideUp(4200); 
$("#imgCon").animate({top:'-225px'},"slow"); 
}); 
$("#box1").click(function(){ 
$("#imgCon").animate({top:'-450px'},"slow"); 
}); 
$("#box2").click(function(){ 
$("#imgCon").animate({top:'-675px'},"slow"); 
}); 
$("#box3").click(function(){ 
$("#imgCon").animate({top:'-900px'},"slow"); 
}); 
}); 
</script> 

CSS：代碼：

復制代碼代碼如下:

 
<style type="text/css"> 
.box{ 
width:40px; 
height:20px; 
border:1px solid #000; 
float:left; 
cursor:pointer; 
} 
#imgCon img{ 
display:block; 
padding:0; 
margin:0; 
width:360px; 
height:225px; 
} 
</style> 