自动轮播效果运行一段时间后，第一次点“prev”没有效果，再点一次就正常了，不知道为什么秋解答？
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery图片轮播</title>
<style type="text/css">
*{margin:0;padding:0;}
#all { background-color: #F6F6F6; }
.scroll_show { width: 500px; margin-right: auto; margin-left: auto; }
.scroll_show .hd { }
.scroll_show .hd ul { width: 150px; background-color: #CCC; margin-right: auto; margin-left: auto; }
.scroll_show .hd ul li { width: 50px; float: left; line-height: 30px; background-color: #CCC; height: 30px; text-align: center; list-style-type: none; }
.scroll_show .hd ul .hover { background-color: #F00; }
.scroll_show .bd { width: 500px; overflow: hidden; }
.scroll_show .bd ul { width: 1500px; }
.scroll_show .bd ul li { float: left; width: 500px; font-size: 20px; line-height: 300px; font-weight: bold; color: #FFF; text-align: center; list-style-type: none; }
.button { width: 100px; margin-right: auto; margin-left: auto; overflow: hidden; }
.button #prev { width: 50px; background-color: #CCC; height: 50px; float: left; text-align: center; line-height: 50px; }
.button #next { width: 50px; background-color: #CCC; height: 50px; text-align: center; float: left; line-height: 50px; }
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<div id="all">
<div class="scroll_show">
<div class="hd">
<ul>
<li class="hover">1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<div class="bd">
<ul>
<li style="background-color:#F00; height: 300px;">1</li>
<li style="background-color:#0F0; height: 300px;">2</li>
<li style="background-color:#00F; height: 300px;">3</li>
</ul>
</div>
</div>
<div class="button">
<div id="prev">prev</div>
<div id="next">next</div>
</div>
</div>
<script>
$(document).ready(function(){
var banner=$('.bd ul');
var len=3;
var prev=$('#prev');
var next=$("#next");
var index=0;
prev.click(function(){
index -= 1;
index==-1?index=len-1:index=index;
showpic(index);
});
next.click(function() {
index += 1;
index==len?index=0:index=index;
showpic(index);
});
$('.hd ul li').click(function(){
var num=$(this).index();
$('.hd ul li').stop(true,false).removeClass("hover");
$('.hd ul li').eq(num).addClass("hover");
showpic(num);
}).trigger("mouseover");
if(true){
$('#all').hover(function(){
clearInterval(bannershow);
},function(){
bannershow=setInterval(function(){
showpic(index);
index++;
index==len?index=0:index=index;
},2000);
}).trigger("mouseleave");
}
function showpic(index){
var nowleft=-index*500;
banner.stop(true,false).animate({"margin-left":nowleft},300);
$('.hd ul li').removeClass("hover").eq(index).addClass("hover");
}
});
</script>
</body>
</html> 在你的setInterval里，showpic调用之后又对index做了自加操作，假如过程开始前index的值是1：
showpic(index); // index === 1;
index++; // index === 2;
然后你在这时候点击prev，index自减1，从2变成了1，showpic传入的依然是1，自然不会起作用。
如果没有信心把握index的状态，建议动态获取当前显示的index的值。
当前index为2是
bannershow=setInterval(function(){
showpic(index);
index++;
index==len?index=0:index=index;
},2000);interval回调执行后，index被设置为0；
而当
prev.click(function(){
index -= 1;
index==-1?index=len-1:index=index;
showpic(index);
});回调执行时，index有被设置会2，showpic(2);
看到的效果是点了prev画面冻结了,过会就好了~~~
解决方法为:
bannershow=setInterval(function(){
index++;
index==len?index=0:index=index;
showpic(index);
},2000);