.pic li {
position: absolute;
top: 0;
left: 0;
display: none;
}
.pic li img {
width: 400px;
height: 200px;
}

position{

position: absolute;
bottom: 0;
right:0;
margin: 0;
background: #000;
opacity: 0.4;
width: 400px;
text-align: center;
}

position li{

width: 10px;
height: 10px;
margin:0 2px;
display: inline-block;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #afafaf;
}

position .cur{

background-color: #ff0000;
}

.arrow {
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 50%;
margin-top: -20px; /width的一半/
background-color: RGBA(0,.3);
color: #fff;
}
.arrow:hover {
background-color: RGBA(0,.7);
}

container:hover .arrow {

display: block;
}

prev {

left: 20px;
}

next {

right: 20px;
}

2 ? 0 : i ; $("#position li").eq(i).addClass('cur').siblings().removeClass("cur"); $(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500); } //向左切换 var playLeft=function(){ i--; i = i < 0 ? 2 : i ; $("#position li").eq(i).addClass('cur').siblings().removeClass("cur"); $(".pic li").eq(i).fadeIn(500).siblings().fadeOut(500); } //鼠标移入移出效果 $("#container").hover(function() { clearInterval(timer); },function() { timer=setInterval(play,2000); }); //左右点击切换 $("#prev").click(function(){ playLeft(); }) $("#next").click(function(){ play(); }) })