JQuery миниатюрный слайдер петли

Question

JQuery миниатюрный слайдер петли

0

Я создал миниатюру карусели и не могу понять, как остановить ее, как только она дойдет до последнего эскиза. В конце миниатюры пользователь должен только нажать на значок #left.arrow, чтобы вернуться через миниатюры.

Заранее спасибо за вашу помощь!!

Вот HTML

            <img id="bigimage" src="images/CHENCH1.jpg" alt="City1" title="City1">

            <div id="thumbnail-wrapper">
                <a id="left" class="arrow"><img src="images/leftb.png"></a>
                        <div id="thumbnails">

                            <img class="thumb" id="image1" src="images/CHENCH1.jpg" alt="City1" title="City1">

                            <img class="thumb" id="image2" src="images/CHENCH2.jpg" alt="City2" title="City2">

                            <img class="thumb" id="image3" src="images/CHENCH3.jpg" alt="City3" title="City3">

                            <img class="thumb" id="image4" src="images/CHENCH4.jpg" alt="City4" title="City4">

                            <img class="thumb" id="image5" src="images/CHENCH5.jpg" alt="City5" title="City5">

                            <img class="thumb" id="image6" src="images/CHENCH6.jpg" alt="City6" title="City6">

                            <img class="thumb" id="image7" src="images/CHENCH7.jpg" alt="City7" title="City7">

                            <img class="thumb" id="image8" src="images/CHENCH1.jpg" alt="City8" title="City8">
                        </div>
            <a id="right" class="arrow"><img src="images/rightb.png"></a>
            </div>



        </div><!--product-->

И вот JS

$(document).ready(function(){
    $(".thumb").click(function(){
        $("#bigimage").attr("src", $(this).attr("src"));
        $("#bigimage").attr("title", $(this).attr("title"));
        $("#bigimage").attr("alt", $(this).attr("alt"));
    });
//move the last item before first item, just in case user click prev button

    $("#right").click(function(){

        $("#thumbnails").animate({
            "left": "-=178px"

        },500);

    });


$("#left").click(function(){

    $("#thumbnails").animate({
        "left": "+=178px"

    },500);

});

});

HERE - это CSS:

#product{
    float: left;
    width: 560px;
}
#rightinfo{
padding-top: 20px;
    float: left;
    width: 200px;
}
#rightinfo h1{
    font-size: 1.5em;
}
.thumb {
    float: left;
    width: 150px;
    display: block;
    margin-right: 28px;
    cursor: pointer;

}

.clear {
    clear: both;
}

#thumbnail-wrapper {
    width: 546px;
    height: 100px;
    overflow: hidden;
    margin-bottom: 20px;
    position: relative;
    left: 7px;
}

#thumbnails {
    width: 1066px;
    position: absolute;
    left: 20px;
    /*overflow: hidden;*/
}

#bigimage {
     padding: 20px;
    width: 560px;
    display: block;
}

.arrow {
    position: absolute;
    z-index: 1;
    cursor: pointer;
}

.arrow:hover {
    opacity: .8;
}

#left {
    left: 0;
}

#right {
    left: 525px;
}

Вот ссылка на сайт: http://emmastoodio.com/GNEUDECK/day-bed.html

STOODIO 20 март 2014, в 17:59

Источник

0

Как вы делаете анимированные миниатюры, не нажимая стрелки влево и вправо? Используете ли вы плагин, если не можете показать свой код?
Enijar 20 март 2014, в 16:56

Теги:

jquery

thumbnails

jquery-animate

2 ответа

1

Вам нужно, чтобы их клики не вызывали скользящее действие, если в настоящее время происходит анимация, и используйте ширину скользящего элемента, чтобы определить, когда выполняется скольжение.

$("#right").click(function(){
    var thumbnails = $("#thumbnails");

    if (thumbnails.is(":animated")) {
        return;
    }

    if ( thumbnails.outerWidth(true) + thumbnails.position().left - 178 > $("#thumbnail-wrapper").innerWidth()) {
        thumbnails.animate({
            "left": "-=178px"           
        },500);
    }
});


$("#left").click(function(){
    var thumbnails = $("#thumbnails");

    if (thumbnails.is(":animated")) {
        return;
    }

    if (thumbnails.position().left < 0) {       
        thumbnails.animate({
            "left": "+=178px"
        },500);
    }
});

Grax 20 март 2014, в 15:49

Ещё вопросы

Как вы делаете анимированные миниатюры, не нажимая стрелки влево и вправо? Используете ли вы плагин, если не можете показать свой код?

durgesh.patle · Accepted Answer · 2014-03-20T15-31-00.000Z

Обновите свой скрипт:

 $(document).ready(function(){
$("#left").hide();
$(".thumb").click(function(){
    $("#bigimage").attr("src", $(this).attr("src"));
    $("#bigimage").attr("title", $(this).attr("title"));
    $("#bigimage").attr("alt", $(this).attr("alt"));
});
 //move the last item before first item, just in case user click prev button

$("#right").click(function(){
     var maxToLeft=0-$("#thumbnails").width()+$("#thumbnails").parent().width();
     var currentLeft=$("#thumbnails").css('left');
     currentLeft=currentLeft.substring(0,currentLeft.length-2);
     if((parseInt(currentLeft)-185)<=maxToLeft)
     {
     $(this).hide();

      $("#thumbnails").animate({

                 "left": (maxToLeft+178)+"px"

    },500);
     return;
     }
     $("#left").show();
    $("#thumbnails").animate({

        "left": "-=178px"

    },500);

});


 $("#left").click(function(){
var currentLeft=$("#thumbnails").css('left');
 currentLeft=currentLeft.substring(0,currentLeft.length-2);
         if((parseInt(currentLeft)+185)>=20)
         {
         $(this).hide();
         $("#thumbnails").animate({
                 "left": "20px"

},500);
         return;
         }
         $("#right").show();

$("#thumbnails").animate({
    "left": "+=178px"

},500);

 });
 });

благодарю вас! Я новичок в jquery, поэтому мне понадобится немного времени, чтобы разобраться в том, что вы написали. один вопрос: похоже, что стрелка вправо скрывается только после того, как я щелкну по ней три раза… и не зависит от количества миниатюр (которые будут меняться в зависимости от страницы). Можете ли вы указать мне правильное направление для решения этой проблемы?
Ваш элемент #thumbnails позиционируется как «абсолютный», поэтому вы должны установить его ширину вручную в зависимости от количества миниатюр. В настоящее время у вас есть 1066px для шести миниатюр (178 * 6). Увеличивайте ширину #thumbnails по мере увеличения числа его дочерних. Например, если имеется 10 миниатюр, то ширина должна составлять # эскизы {ширина: 1780 пикселей; }