HTML部分
<div class="all">
<!--图片盒子-->
<div class="imgs">
<div class="img">
<img src="1.jpg" alt="1" />
</div>
<div class="img">
<img src="2.jpg" alt="2" />
</div>
<div class="img">
<img src="3.jpg" alt="3" />
</div>
<div class="img">
<img src="4.jpg" alt="4" />
</div>
</div>
<!--按钮盒子-->
<div class="btn">
<p class="prev">
<img src="prev.png"/>
</p>
<p class="next">
<img src="next.png" />
</p>
</div>
</div>
JQ部分
简单方法不可操作动画效果
//移入移出事件
$(".all").mouseover(function(){
$(".btn").show();
})
$(".all").mouseout(function(){
$(".btn").hide();
})
//点击事件
$(".next").click(function(){
$(".img:first").insertAfter(".img:last");
})
$(".prev").click(function(){
$(".img:last").insertBefore(".img:first");
})
可更改动画效果（渐入效果）
//移入移出事件
$(".all").mouseover(function(){
$(".btn").show();
})
$(".all").mouseout(function(){
$(".btn").hide();
})
var n = 0;
$(".next").click(function(){
if ( n < $(".img").length-1) {
n++;
}else{
n = 0;
}
$(".img").eq(n).siblings().fadeOut(500);
$(".img").eq(n).fadeIn(500);
})
$(".prev").click(function(){
if ( n > 0) {
n--;
}else{
n = $(".img").length-1;
}
$(".img").eq(n).siblings().fadeOut(500);
$(".img").eq(n).fadeIn(500);
})
}
