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

134 阅读 0 评论 89 点赞

我是靠谱客的博主阔达煎蛋，最近开发中收集的这篇文章主要介绍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> 