jQuery图片依次出现

最新推荐文章于 2023-06-28 09:55:31 发布

pingwei_deng

最新推荐文章于 2023-06-28 09:55:31 发布

阅读量759

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/pingwei_deng/article/details/79803627

版权

JS 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片依次出现</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style:none;
}
#a{
width: 300px;
height: 100px;
margin: 0 auto;
margin-top: 100px;
background: #F00;
}
#a>li{
background: #f0f;
width: 100px;
height: 100px;
float: left;
overflow: hidden;
}
#a>li>img {
margin-left: -100px;
display: block;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<ul id="a">
<li><img src="img/1.gif" alt=""></li>
<li><img src="img/3.jpg" alt=""></li>
<li><img src="img/2.gif" alt=""></li>
</ul>
</body>
<script src="img/jquery.min.js"></script>
<script>
// 图片地址
$(document).ready(function(){
$("#a img").eq(0).animate({
marginLeft: 0,
// width:'100%'
}, 3000,function(){
$("#a img").eq(1).animate({
marginLeft: 0,
// width:'100%'
}, 3000,function(){
$("#a img").eq(2).animate({
marginLeft: 0,
// width:'100%'
}, 3000)
})
});
})

</script>
</html>

pingwei_deng

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery图片依次出现

&lt;!doctype html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;图片依次出现&lt;/title&gt; &lt;style&gt; * { margin: 0; padding: 0; } li { list
复制链接

扫一扫

专栏目录