javascript - 一个click事件的bug不知道哪里出错了
1、当图片滚动嘴右侧后，再快速点击左侧箭头时，放大镜功能失效，其它情况下貌似随便怎么点都没有问题。
查不出哪里出问题了，使用了stop(),和clearQueue()，也没有效果
html代码
<p class="slide">
<p class="slide-big"></p>
<p class="slide-small">
<p class="slide-move"></p>
<ul>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
</p>
<!-- <p class="slide-btn">
<span class="slide-btn-pre"></span>
<span class="slide-btn-next"></span>
<ul>
<li><img src="1.jpg" alt=""></li>
<li><img src="2.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
<li><img src="4.jpg" alt=""></li>
<li><img src="5.jpg" alt=""></li>
<li><img src="3.jpg" alt=""></li>
</ul>
</p> -->
</p>css
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
.slide{
position: relative;
margin: 200px auto;
width: 320px;
}
.slide-small{
position: relative;
width: 318px;
height: 318px;
border: 1px solid #ccc;
}
.slide-small li{
position: absolute;
left: 0;
top: 0;
width: 318px;
height: 318px;
overflow: hidden;
display: none;
}
.slide-small li img{
width: 318px;
height: 318px;
}
.slide-btn{
position: relative;
margin-top: 22px;
width: 318px;
height: 57px;
overflow: hidden;
}
.slide-btn ul{
position: absolute;
left: 30px;
top: 0;
/*width: 1000%;*/
/*left: 30px;*/
}
.slide-btn li{
float: left;
width: 67px;
height: 57px;
cursor: pointer;
/*margin-right: 10px;*/
}
.slide-btn li.active img{
border: 1px solid #C70000;
}
.slide-btn li img{
width: 53px;
height: 53px;
border: 1px solid #ccc;
padding: 1px;
}
.slide-btn span{
position: absolute;
top: 0;
display: block;
width: 30px;
height: 57px;
cursor: pointer;
z-index: 10;
background-color: #fff;
}
.slide-btn-pre{
left: 0;
background: url(left.gif) no-repeat 0 12px;
}
.slide-btn-next{
right: 0;
background: url(right.gif) no-repeat 12px 12px;
}
.slide-big{
position: absolute;
left: 320px;
top: 0;
border: 1px solid #eee;
width: 400px;
height: 400px;
overflow: hidden;
display: none;
}
.slide-big img{
position: absolute;
width: 720px;
height: 720px;
}
.slide-move{
position: relative;
display: none;
width:120px;
height: 120px;
background: #ffffcc;
opacity: .3;
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
-ms-filter:'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)';
cursor: move;
z-index: 333;
}jQuery
;jQuery(function () {
$('.slide').append('<p class="slide-btn"><span class="slide-btn-pre"></span><span class="slide-btn-next"></span></p>')
$('.slide').find('ul').clone(true).appendTo('.slide-btn');
function _clickInit() {
$('.slide-btn').find('li').eq(0).trigger('click');
}
setTimeout(_clickInit, 100);
function _imgState (index) {
$('.slide-small').find('li').eq(index).stop(true, true).fadeIn(500).addClass('active').siblings().fadeOut(500).removeClass('active');
$('.slide-btn').find('li').eq(index).stop(true, true).addClass('active').siblings().removeClass('active');
$('.slide-big').html( $('.slide-small').find('li').eq(index).html() );
}
$('.slide-btn').find('li').on('click', function() {
var index = $(this).index();
_imgState(index);
_slideMagnifier(index);
});
$('.slide-btn-next').on('click', function() {
var index = $('.slide-small').find('li').index( $('.active') );
index++;
var slidebtnLiWidth = $('.slide-btn li').width();
var moveLeftWidth = parseInt( $('.slide-btn ul').css('marginLeft') ) - slidebtnLiWidth;
if ( moveLeftWidth >= -($('.slide-btn li').length * slidebtnLiWidth - slidebtnLiWidth * 4) ) {
$('.slide-btn ul').css({
marginLeft: moveLeftWidth
});
}
_imgState(index);
_slideMagnifier(index);
});
$('.slide-btn-pre').on('click', function() {
var index = $('.slide-small').find('li').index( $('.active') );
index--;
var slidebtnLiWidth = $('.slide-btn li').width();
var moveLeftWidth = parseInt( $('.slide-btn ul').css('marginLeft') ) + slidebtnLiWidth;
if ( parseInt( $('.slide-btn ul').css('marginLeft') ) < 0 ) {
$('.slide-btn ul').css({
marginLeft: moveLeftWidth
});
}
if (index >= 0) {
_imgState(index);
_slideMagnifier(index);
}
});
function _slideMagnifier (index) {
var objSlideSmall = $('.slide-small');
var objslideSmallLi = $('.slide-small li').eq(index);
var objSlideMove = $('.slide-move');
var objSlidebig = $('.slide-big');
var objSlidebigImage = $('.slide-big').find('img');
objSlideSmall.on('mouseover', function(e) {
objSlideMove.css({
display: 'block'
});
objSlidebig.css({
display: 'block'
});
});
objSlideSmall.on('mouseout', function() {
objSlideMove.hide();
objSlidebig.hide();
});
objSlideSmall.on('mousemove', function(e) {
var left = e.pageX - objslideSmallLi.offset().left - objSlideMove.width() / 2;
var top = e.pageY - objslideSmallLi.offset().top - objSlideMove.width() / 2;
if( left < 0 ){
left = 0;
} else if ( left > objslideSmallLi.width() - objSlideMove.width() ) {
left = objslideSmallLi.width() - objSlideMove.width();
}
if( top < 0 ){
top = 0;
} else if ( top > objslideSmallLi.height() - objSlideMove.width() ){
top = objslideSmallLi.height() - objSlideMove.height();
}
objSlideMove.css({ //鼠标跟随
left : left + "px",
top : top + "px"
});
var precentX = left / ( objslideSmallLi.outerWidth() - objSlideMove.outerWidth() );
var precentY = top / ( objslideSmallLi.outerHeight() - objSlideMove.outerHeight() );
var x = precentX * ( objSlidebigImage.outerWidth()-objSlidebig.outerWidth() );
var y = precentY * ( objSlidebigImage.outerHeight() - objSlidebig.outerHeight() );
objSlidebigImage.css({ // 放大镜
left : -x + "px",
top : -y +"px"
});
});
}
代码写的比较烂，希望大神帮助一下
