Автослайд JQuery JCarousel Lite не работает - PullRequest
Новая
       26

Автослайд JQuery JCarousel Lite не работает

2 голосов
/ 04 ноября 2011

У меня есть div, и он содержит такие элементы: 

 <div class='anyClass' style='float:left'>
 <ul class="slider_ctre" id="mycarousel">
    <li class="outer_prdcts"><asp:HyperLink ID="hyp0" runat="server"   NavigateUrl="http://192.168.20.120/tabid/62/Gifts+++Jewelery/HOuse+Of+Jamal+Attar/Jamal+Collection/0/SKU/1016-1637-2699-0/Default.aspx"><img class="prdct_img_blue" src="/Portals/_default/images/image_1.jpg" alt='' width='100' height='100' /></asp:HyperLink></li>
    <li class="outer_prdcts"><asp:HyperLink ID="hyp1" runat="server" NavigateUrl="http://192.168.20.120/tabid/62/Gifts+++Jewelery/HOuse+Of+Jamal+Attar/Jamal+Collection/0/SKU/1016-1637-2699-0/Default.aspx"><img class="prdct_img_blue" src='/Portals/_default/images/image_2.jpg' alt='' width='100' height='100' /></asp:HyperLink></li>
    <li class="outer_prdcts"><img class="prdct_img_blue" src='/Portals/_default/images/image_3.jpg' alt='' width='100' height='100' /></li>
    <li class="outer_prdcts"><img class="prdct_img_blue" src='/Portals/_default/images/image_4.jpg' alt='' width='100' height='100' /></li>
    <li class="outer_prdcts"><img class="prdct_img_blue" src='/Portals/_default/images/image_5.jpg' alt='' width='100' height='100' /></li>
    <li class="outer_prdcts"><img class="prdct_img_blue" src='/Portals/_default/images/image_6.jpg' alt='' width='100' height='100' /></li>
 </ul>

 </div>

Я использую jQuery jCarousel Lite для скольжения этих изображений.Мое требование - как я могу остановить его прокрутку при наведении мыши?

jQuery: 

   <script type='text/javascript' language='javascript'>
   $(function() {
    $('.anyClass').jCarouselLite({
    btnNext: '.next',
    btnPrev: '.prev',
    auto: 200
    });

    });
   </script>

Ответы [ 2 ]

4 голосов
/ 04 ноября 2011

Очевидно, jCarousel Lite не предлагает опцию паузы.

Здесь обсуждается о внесении изменения в jCarousel Lite для добавления опции паузы.

Согласно комментариям на веб-сайте jCarousel Lite , изменения в не минимизированном файле jcarousellite.js следующие:

Добавьте это в список опций (под строкой o = $.extend({). 

pause: false

Найти этот раздел: 

if(o.auto)
        setInterval(function() {
            go(curr+o.scroll);
        }, o.auto+o.speed);

И замените его следующим: 

if(o.auto)
    aktiv = setInterval(function() {
        go(curr+o.scroll);
    }, o.auto+o.speed);

if(o.pause)
    div.mouseover(function() {
        clearInterval(aktiv);
    });
    div.mouseout(function() {
        aktiv = setInterval(function() {
            go(curr+o.scroll);
        }, o.auto+o.speed);
    });

В ваши jCarouselLite() параметры включите его следующим образом ... 

pause: true
0 голосов
/ 29 января 2014

Если вы находитесь на странице,

и если два или более запускает jCarouselLite,

переменные o необходимо явно добавить объект расширения в актив. 

o = $.extend({
    aktiv: null,
    pause: false


и актив меняет о.актив

перед кодом: Актив
после кода: o.aktiv 

if(o.auto)
    o.aktiv = setInterval(function() {
        go(curr+o.scroll);
    }, o.auto+o.speed);

if(o.pause) {
    div.mouseover(function() {
        clearInterval(o.aktiv);
    });
    div.mouseout(function() {
        o.aktiv = setInterval(function() {
            go(curr+o.scroll);
        }, o.auto+o.speed);
    });
}


закончено: D

...