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>