Блог

Я создал пользовательский плагин для слайдера изображений. Это как передать параметр no изображений для отображения. Как остановить анимацию, когда будет видно последнее изображение? Иногда также возникает проблема с предыдущим щелчком мыши. Помогите мне оптимизировать код.

CSS

 .imgpresentation {
width: 520px;
height: 110px;
overflow: hidden;
border: 1px solid #ddd;
position: relative;
}
.imgpresentation img {
 float: left;
 padding: 5px;
}
.imgpresentation .prev {
left: 0;
position: absolute;
top: 40%;
}
.imgpresentation .next {
right: 0;
position: absolute;
top: 40%;
 }
.slidethemimgpresentation {
position: absolute;
}
 

JS

 <script>
$.fn.imgSlider = function(nImages) {
var imgW = $(this).find('img').outerWidth(),
    imgH = $(this).find('img').outerHeight(),
    imgL = $(this).find('img').length,
    that = $(this),
    container = that.find('.slidethemimgpresentation');

that.append('<a href="#" class="prev">Previous</a>' 
' <a href="#" class="next">Next</a>').css({
    'width': nImages * imgW,
    'height': imgH
});
container.css({
    'width': imgW * imgL
});

imgW = nImages * imgW;

that.find('.next').on('click', function() {
    var currLeft = parseInt(container.css('left'));
    currLeft  = -imgW;
    container.animate({
        'left': currLeft
    });
    return false;
});
that.find('.prev').on('click', function() {
    var currLeft = parseInt(container.css('left'));
    if (currLeft == 0) {
        return false;
    }
    currLeft  = imgW;

    container.animate({
        'left': currLeft
    });
    return false;
});
};
$(document).ready(function() {
  $('#imgpresentation').imgSlider(2);
  $('#imgpresentation2').imgSlider(3);
  $('#imgpresentation3').imgSlider(4);
  $('#imgpresentation4').imgSlider(1);
});
</script>
 

html`

 <div id="imgpresentation4" class="imgpresentation">
    <div class="slidethemimgpresentation">
        <img class="presentatinthis" src="http://placehold.it/150x150amp;text=Slide301" />
        <img class="presentatinthis" src="http://placehold.it/150x150amp;text=Slide302" />
        <img class="presentatinthis" src="http://placehold.it/150x150amp;text=Slide303" />
        <img class="presentatinthis" src="http://placehold.it/150x150amp;text=Slide304" />
        <img class="presentatinthis" src="http://placehold.it/150x150amp;text=Slide305" />
    </div>
</div>
<div id="imgpresentation" class="imgpresentation">
    <div id="slidethemimgpresentation" class="slidethemimgpresentation">
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide101" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide102" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide103" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide104" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide105" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide106" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide107" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide108" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide109" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide110" />
    </div>
</div>
<div id="imgpresentation2" class="imgpresentation">
    <div class="slidethemimgpresentation">
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide201" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide202" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide203" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide204" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide205" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide206" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide207" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide208" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide209" />
        <img class="presentatinthis" src="http://placehold.it/250x100amp;text=Slide210" />
    </div>
</div>
<div id="imgpresentation3" class="imgpresentation">
    <div class="slidethemimgpresentation">
        <img class="presentatinthis" src="http://placehold.it/350x150amp;text=Slide301" />
        <img class="presentatinthis" src="http://placehold.it/350x150amp;text=Slide302" />
        <img class="presentatinthis" src="http://placehold.it/350x150amp;text=Slide303" />
        <img class="presentatinthis" src="http://placehold.it/350x150amp;text=Slide304" />
        <img class="presentatinthis" src="http://placehold.it/350x150amp;text=Slide305" />
        <img class="presentatinthis" src="http://placehold.it/350x150amp;text=Slide306" />
        <img class="presentatinthis" src="http://placehold.it/350x150amp;text=Slide307" />
        <img class="presentatinthis" src="http://placehold.it/350x150amp;text=Slide308" />
        <img class="presentatinthis" src="http://placehold.it/350x150amp;text=Slide309" />
        <img class="presentatinthis" src="http://placehold.it/350x150amp;text=Slide310" />
    </div>
</div>
 

Это немного сложный способ сделать это. Потому что он не управляется массивом, а перемещает контейнер = X каждый раз.

Вам нужно будет проверить для if( container.style.left imgW > totalWidth ) отладки попробуйте использовать console.log( container.style.left )

Я бы рекомендовал использовать существующий слайдер, iDangerio.us Swiper действительно хорош с отличным API.

Кроме того, это немного неэффективно, не то чтобы это имело слишком большое значение, потому что оно выполняется только при инициализации.

 var imgW = $(this).find('img').outerWidth(),
imgH = $(this).find('img').outerHeight(),
imgL = $(this).find('img').length,
that = $(this),
container = that.find('.slidethemimgpresentation')
 

Было бы лучше и эффективнее анализировать объект jquery только один раз.

 var that = $(this),
img = that.find('img'),
imgW = img.outerWidth(),
imgH = img.outerHeight(),
imgL = img.length,
container = that.find('.slidethemimgpresentation'),
totalWidth = imgW * imgL;