1.第一种做法：假如说有三张图片分别是a、b、c，我就再放三张图片还是之前的图片a、b、c,这样就有六张图了。然后定义一个ul标签，这个ul的宽度等于这六张图片的宽度，在css样式中我们让上述的ul标签的左边距为负的一个图片的宽度，
<code>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 250px;
height: 164px;
position: relative;
background-color: pink;
margin: 0 auto;
margin-top: 100px;
overflow: hidden;
}
ul{
width: 1500px;
height: 164px;
list-style: none;
display: block;
position: absolute;
left: -250px;
/*margin-top: -17px;*/
}
ul li{
float: left;
}
a{
width: 28px;
height: 62px;
display: block;
background-color: rgba(0,0,0,0.5);
position: absolute;
right: 0;
top: 30%;
font-size: 24px;
color: ghostwhite;
text-decoration: none;
line-height: 62px;
text-align: center;
z-index: 100;
}
</style>
<script src = "jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
var leftMargin = -250;
$("#btn").click(function(){
leftMargin -= 250;
var time = 1000;
if(leftMargin ==-1250){
// time=0;
// leftMargin = -250;
// $("#move").animate({left:leftMargin + "px"},time);
leftMargin=-500;
time=1000;
$("#move").animate({left:leftMargin + "px"},time);
}
else{
$("#move").animate({left:leftMargin + "px"},time);
}
});
});
</script>
</head>
<body>
<div class = "container">
<a href="#" id = "btn">></a>
<ul id = "move">
<li><img src = "img/34.jpg"/></li>
<li><img src = "img/41.jpg"/></li>
<li><img src = "img/42.jpg"/></li>
<li><img src = "img/34.jpg"/></li>
<li><img src = "img/41.jpg"/></li>
<li><img src = "img/42.jpg"/></li>
</ul>
</div>
</body>
</html>
</code>
网友评论