javascript - A click event bug. I don’t know what went wrong.
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
<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"
});
});
}
The code is poorly written, I hope someone can help me
