1. When the picture is scrolled to the right side of the mouth, and then the left arrow is quickly clicked, the magnifying glass function becomes invalid. In other cases, it seems that there is no problem in clicking anywhere.

Can't find out what went wrong. I used stop() and clearQueue(), but it has no effect

htmlcode

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('
') $('.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" }); }); }

The code is poorly written, I hope someone can help me