jquery实现简单易懂的图片展示小例子

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>

频道导航

jquery实现简单易懂的图片展示小例子

您可能感兴趣的文章: