<!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>
<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>