Я написал код jquery для перехода к предыдущему или следующему изображению в элементе при наведении первого или последнего
изображения, но оно не работает должным образом, оно просто скользит один раз, но не плавно при первом наведении курсора мыши и после этого оно не скользить больше, когда я снова наведу курсор мыши на него. пожалуйста, посмотрите и узнайте, что происходит в моем коде, почему он не скользит гладко? и почему он скользит, когда я снова при наведении мыши? заранее спасибо .
Вы можете посмотреть на скрипку здесь: http://jsfiddle.net/9M3dM/
HTML код:
<div id="slide-wrapper">
<ul class="slide-container">
<li class="first">
<img alt="img slide movie" src="Images1.png" />
</li>
<li>
<img alt="img slide movie" src="Images2.png" />
</li>
<li>
<img alt="img slide movie" src="Images3.png" />
</li>
<li>
<img alt="img slide movie" src="Images9.png" />
</li>
<li>
<img alt="img slide movie" src="Images8.png" />
</li>
<li>
<img alt="img slide movie" src="Images7.png" />
</li>
<li class="last">
<img alt="img slide movie" src="Images6.png" />
</li>
<li>
<img alt="img slide movie" src="Images5.png" />
</li>
<li>
<img alt="img slide movie" src="Images4.png" />
</li>
<li>
<img alt="img slide movie" src="Images3.png" />
</li>
<li>
<img alt="img slide movie" src="Images2.png" />
</li>
<li>
<img alt="img slide movie" src="Images1.png" />
</li>
</ul>
</div>
Код CSS:
#slide-wrapper{
position:relative;
overflow:hidden;
height:183px;
padding-top: 1px;
}
#slide-wrapper ul.slide-container{
overflow:hidden;
position:absolute;
width:100%;
height:183px;
}
ul.slide-container li{
cursor: pointer;
display: block;
float: left;
height: 183px;
padding-right: 1px;
width: 145px;
}
ul.slide-container li img{
border: none;
height: 183px;
width: 145px;
}
ul.slide-container li.last{
padding-right: 0;
}
Код запроса:
(function ($) {
var isAnimating = false;
var methods = {
init: function (options) {
var self = this;
},
display: function () {
methods.slide();
},
slide: function () {
$(".slide-container li.last").mouseover(function () {
methods._next(".slide-container", -147);
});
$(".slide-container li.first").mouseover(function () {
methods._prev(".slide-container", 147);
});
},
_next: function (target, move) {
var base = parseInt($(target).css("margin-left"), 10);
var maxLeng = ($("ul.slide-container li").length * $("ul.slide-container li").not("first").innerWidth()) - (7 * $("ul.slide-container li").not("first").innerWidth());
if (base == maxLeng || isAnimating) {
return false;
}
isAnimating = true;
base = base + move;
$(target).find("li.last").next("li").addClass("last");
$("#slide-wrapper").animate({
"margin-left": base
}, 600, "easeInOutSine", function () {
isAnimating = false;
$(target).find("li.last:first").removeClass("last");
$(target).find("li.first").removeClass("first").next("li").addClass("first");
});
},
_prev: function (target, move) {
var base = parseInt($(target).css("margin-left"), 10);
if (isAnimating || base === 0) {
return false;
}
base = base + move;
isAnimating = true;
$(target).find("li.first").prev("li").addClass("first");
$("#slide-wrapper").animate({
"margin-left": base
}, 600, "easeInOutSine", function () {
isAnimating = false;
$(target).find("li.last").removeClass("last").prev("li").addClass("last");
$(target).find("li.first").removeClass("first");
});
}
};
$(document).ready(function () {
self.display();
});
})(jQuery);