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

前端技术 2023/09/09 JavaScript
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>

本文地址：https://www.stayed.cn/item/26001

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案