HTML
<div class="divContainer">
<div class="imgContainer">
<ul class="imgContent clear">
<li>
<img src="image/1.jpg" alt="">
</li>
<li>
<img src="image/2.jpg" alt="">
</li>
<li>
<img src="image/3.jpg" alt="">
</li>
<li>
<img src="image/4.jpg" alt="">
</li>
</ul>
</div>
<div class="turnLeft"><</div>
<div class="turnRight">></div>
</div>
JS
$(document).ready(function () {
var ul = $(".imgContent"),
li = $(".imgContent li"),
length = li.length,
width = li.width(),
//初始化number
number = 1,
speed = 800,
//显示几张图片
showNumber = 1;
ul.css("width",(length+2)*width);
ul.css("left",-width*number);
li.first().clone().appendTo(ul);
li.last().clone().prependTo(ul);
$(".turnLeft").click(function () {
number--;
if(number<0){
number = length; //重置
}
ul.animate({
left : -width*number
},speed,function () {
if(number<=0){
number = length;//重置
ul.css("left",-width*number);
}
})
});
$(".turnRight").click(function () {
number++;
ul.animate({
left : -width*number
},speed,function () {
if(number > length+1-showNumber){
number = 1;//重置
ul.css("left",-width*number);
}
})
})
})
CSS
body{
font:12px "microsoft yahei",Arial,Helvetica,sans-serif;
color:#000304;
margin:0;
background-color: #ffffff;
min-width: 1350px;
}
p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd{
margin:0;
padding:0;
list-style:none;
}
img{
vertical-align:middle;
border: none;
}
.lf{float:left;}
.rt{float:right;}
.clear:after{
content: ' ';
display: table;
clear: both;
}
.clear{
clear: both;
}
.divContainer{
width: 500px;
height: 300px;
position: relative;
margin: 0 auto;
}
.imgContainer{
width: 500px;
height: 300px;
margin: 100px auto;
overflow: hidden;
}
.imgContent{
height: 300px;
position: relative;
}
.imgContent li{
float: left;
width: 500px;
height: 300px;
}
.imgContent li img{
width: 500px;
height: 300px;
}
.turnLeft,.turnRight{
font-size: 60px;
width: 50px;
height: 50px;
line-height: 50px;
cursor: pointer;
}
.turnLeft{
position: absolute;
top: 0;
bottom: 0;
left: -70px;
margin: auto;
}
.turnRight{
position: absolute;
top: 0;
bottom: 0;
right: -70px;
margin: auto;
}