<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮轮播图</title>
<style>
ul,li{list-style-type: none;}
#div{
width:860px;
margin:20 auto;
}
.picBox{
height: 498px;
width:80%;
overflow:hidden;
position:relative;
float: left;
}
#pic{
position: relative;
height: 100%;
background-color: black;
z-index:0;
}
#pic li{
zoom:1; vertical-align:middle;
}
#pic li img{
width:;
height: 498px;
display:block;
}
#list{
height: 498px;
width:20%;
overflow: hidden;
float: right;
background-color: blue;
}
.on{
border:1px solid red;
}
.hide{
display: none;
}
</style>
</head>
<script src=".\jquery-1.9.1.min.js"></script>
<script src="C:\Users\leo\Desktop\工作\js\jquery.SuperSlide.2.1.1.js"></script>
<body>
<div id="div">
<div class="picBox">
<div id="pic">
<ul>
<li><img src="D:/JavaScript/jQuery/test/1.jpg" alt="" height="498"></li>
<li><img src="D:/JavaScript/jQuery/test/2.jpg" alt=""></li>
<li><img src="D:/JavaScript/jQuery/test/3.jpg" alt=""></li>
<li><img src="D:/JavaScript/jQuery/test/4.jpg" alt=""></li>
<li><img src="D:/JavaScript/jQuery/test/5.jpg" alt=""></li>
<li><img src="D:/JavaScript/jQuery/test/6.jpg" alt=""></li>
<li><img src="D:/JavaScript/jQuery/test/7.jpg" alt=""></li>
<li><img src="D:/JavaScript/jQuery/test/8.jpg" alt=""></li>
</ul>
</div>
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
<div id="list">
<ul>
<li class="on li"><img src="D:/JavaScript/jQuery/test/1.jpg" alt="" height="120" ></li>
<li class="li"><img src="D:/JavaScript/jQuery/test/2.jpg" alt="" height="120"></li>
<li class="next li"><img src="D:/JavaScript/jQuery/test/3.jpg" alt="" height="120"></li>
<li class="next li"><img src="D:/JavaScript/jQuery/test/4.jpg" alt="" height="120"></li>
<li class="li"><img src="D:/JavaScript/jQuery/test/5.jpg" alt="" height="120"></li>
<li class="li"><img src="D:/JavaScript/jQuery/test/6.jpg" alt="" height="120"></li>
<li class="li"><img src="D:/JavaScript/jQuery/test/7.jpg" alt="" height="120"></li>
<li class="li"><img src="D:/JavaScript/jQuery/test/8.jpg" alt="" height="120"></li>
</ul>
</div>
<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
</div>
</body>
</html>
<script>
$(".picBox").slide({mainCell:"#pic ul",autoPlay:false,effect:"leftLoop"});
</script>
<script>
var show = show();
$('#list li').on('click',function(){
$('.on').removeClass('on');
$(this).addClass('on');
var fal = $(this).hasClass('next');
var len = $('#list li').length;
var fas = $(this).hasClass('prev');
var index = $(this).index();
if (fal) {
$('.next').removeClass('next');
//加入修饰性动画
$('#list .li:eq(0)').addClass('hide').removeClass('li');
$('#list .li:eq(2),#list .li:eq(3)').addClass('next');
$('#list .li:eq(0)').addClass('prev');
}
if (fas && index != 0) {
$('.prev').removeClass('prev');
$('#list .li:eq(0)').prev('.hide').addClass('prev li').removeClass('hide');
$('.next').removeClass('next');
$('#list .li:eq(2),#list .li:eq(3)').addClass('next');
}
//左侧大图实例
show(index);
});
function show(){
var flag = 0;
return function(index){
var num = index - flag;
var but = $('.picBox a.next').click();
flag = index;
if(num < 0)
{
num = Math.abs(num);
but = $('.picBox a.prev').click();
}
for(var i = 0;i<num;i++)
{
but;
console.log(but);
}
};
}
</script>
问题描述如下，因为使用了插件，代码的愿意是，通过判断两个预览图之间index的差，来调用不同按钮上的click（）事件，和click事件的次数，然后出现的意外是第一次成功了，后面的都失败了，而且打印出的but是不同的居然？解决不了，所以来求解？
打印的效果如图示，图片可以点击放大