1. дома
  2. Вопрос и ответ
  3. Непрерывный слайдер прокрутки в одном направлении с использованием jquery

Непрерывный слайдер прокрутки в одном направлении с использованием jquery

2012-03-23 1 views
1

Я использую jQuery Tiny Carousel для скользящих изображений, но наш клиент просит непрерывную прокрутку в том же направлении, что и я ищу его в течение дня, и я не мог найти точную вещь ... Кто-нибудь здесь натолкнулся на него?Непрерывный слайдер прокрутки в одном направлении с использованием jquery

Теперь я использую этот плагин для tinycarousel

<script type="text/javascript"> 
      jQuery(document).ready(function() { 
      jQuery("#slider").tinycarousel({ axis: 'x', display: 1, interval: true }) 
     }); 
</script>

и я обнаружил, что с этим зациклившейся не возможно кто-нибудь знает, как это цикл? или указать мне контроль над другой слайдер JQuery ....

источник

2012-03-23 krish

+0

То же направление означает, что вы хотите, чтобы отключить прокрутку в другом направлении? –

+0

Да прокрутка, как слева направо, с постоянной скоростью – krish

+0

Вы имеете в виду бесконечный цикл –

ответ

0

Попробуйте один

$(function(){ 

var current = 1; 
var totalImages = $("#slider-code li").size(); 
var oSlider = $('#slider-code').tinycarousel({   
    animation:false, 
    controls: false 
}); 

$('#nextButton').click(function(){ 
    current += 1; 
    if(current > totalImages){ 
    current = 1; 
    } 
    oSlider.tinycarousel_move(current);   
});

});

и вот демка в jsfiddler

источник

2012-03-23 06:48:56 suhair

+0

Я вижу скрипку, когда все права на изображения показываются, она снова идет свитками влево и идет на правильном направлении .... любой способ сделать его петлей ...? – krish

+0

@krish Что вы подразумеваете под циклом? Вы имели в виду, что когда отображается первый набор изображений, набор должен отображаться в обратном направлении? – suhair

+0

: Я имею в виду, что они должны двигаться в том же направлении, что и 1-> 2-> 3-> 4-> 1-> 2-> 3 ..... и т. Д. – krish

0

Это то, что я закодированы в такой ситуации, как ваша. Это прокручивается, но вы можете легко изменить его для прокрутки в любом направлении. Изменение алгоритма от модификации MarginTop к:

  • MarginTop увеличения на 1, до вниз прокруток
  • MarginLeft увеличения на 1, для слева направо свитки
    • снижения

  • MarginLeft 1, для справа налево прокручивать

    (function($) 
{ 
    var ScrollMe = function(element) 
{ 
     var elem = $(element); 
     var obj = this; 

     elem.wrapInner("<div class='mbui_scrollable'></div>"); 
     var scr=elem.children("div.mbui_scrollable"); 

     setInterval($(this).scrollUp,130); //CHANGE HERE FOR SPEED 
    }; 
    $.fn.scrollme = function() 
    { 
     return this.each(function() 
     { 
      var element = $(this); 
      // Return early if this element already has a plugin instance 
      if (element.data('scrollme')) return; 
      // pass options to plugin constructor 
      var myplugin = new ScrollMe(this); 
      // Store plugin object in this element's data 
      element.data('scrollme', myplugin); 
     }); 
    }; 
    $.fn.scrollUp = function(elem) 
    { 
     var allObj=$(".mbui_scrollable"); 
     for(i=0;i<allObj.length;i++) 
     var s=$(allObj[i]).css('marginTop'); 
      var n=parseInt(s)-1;   //CHANGE HERE TO CHANGE DIRECTION AND SPEED 
      var h=$(allObj[i]).css('height'); 
      if((n*-1)>=parseInt(h)) 
       n=$(allObj[i]).parent().css('height'); 
      $(allObj[i]).css('marginTop',n); 
    };})(jQuery);

Нанести на элементы, такие как:

$(".scroll").scrollme();

источник

2012-03-23 06:59:53 kishu27

0

Для моего веб-сайта приложения iPhone (niwuzzles.com) Я использовал плагин jQuery Alen Grakalic для этого.

Описание

проекта:
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

Непрерывное слайд-демонстрация:
http://cssglobe.com/lab/easyslider1.7/01.html

Пример кода:

<head> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/easySlider1.7.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#slider").easySlider({ 
       auto: true, 
       continuous: true 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="slider"> 
      <ul>     
       <li><img src="img1.png" /></li> 
       <li><img src="img2.png" /></li> 
       <li><img src="img3.png" /></li> 
       <li><img src="img4.png" /></li> 
      </ul> 
     </div> 
</body>

источник

2012-03-23 07:05:42

0

Я внес некоторые изменения в Tiny Carousel, чтобы добавить цикл. Я просто подобрал некоторые вещи из функции скользящего скольжения.

http://pastebin.com/3M3akv9r

источник

2012-07-28 01:25:24 Xynyn

0

я думаю, что он должен работать

$('#slider1').tinycarousel({start: 2, 
     interval: true 
     });

источник

2013-12-19 13:23:06 DevelopmentBucket

2

Я делаю это

в jquery.tinycarousel.JS Поиск функции Initialize() и заменить

iSteps = Math.max(1, Math.ceil(oPages.length/options.display) - iLeftover);

с

iSteps = 9999999999999999999999999;

ИЛИ в jquery.tinycarousel.min.js Поиск

u=Math.max(1,Math.ceil(k.length/e.display)-x);

и заменить u = 9999999999999999999999999;

Тогда

поместить этот код в документ готов

$('#slider1').tinycarousel({'display':3}); 
    var SliderLength = $('#slider1 .viewport li').length;//set li or img or what ever 
    var append = $('#slider1 .viewport > ul').html();//grab the curent items 
    $('.buttons.next').mouseup(function() 
    {//next button click event 
     $('#slider1 ul').append(append);//append those item 

     var sliderWidth = parseInt($('#slider1 .overview').width()); 
     var curLength = parseInt($('#slider1 li').length); 
     $('#slider1 .overview').width((sliderWidth * (curLength/SliderLength)));//update content width 
    });

Demo

источник

2013-12-28 07:51:08 h0mayun

2

Вот это demo using the jQuery.carouFredSel-plugin

HTML

<div id="wrapper"> 
    <div id="carousel"> 
     <div> 
      <img src="img/fruit1.png" alt="fruit1" width="200" height="200" /> 
      <span>Apple</span> 
     </div> 
     <div> 
      <img src="img/fruit2.png" alt="fruit2" width="200" height="200" /> 
      <span>Mandarin</span> 
     </div> 
     <div> 
      <img src="img/fruit3.png" alt="fruit3" width="200" height="200" /> 
      <span>Banannas</span> 
     </div> 
     <div> 
      <img src="img/fruit4.png" alt="fruit4" width="200" height="200" /> 
      <span>Cherries</span> 
     </div> 
     <div> 
      <img src="img/fruit5.png" alt="fruit5" width="200" height="200" /> 
      <span>Orange</span> 
     </div> 
     <div> 
      <img src="img/fruit6.png" alt="fruit6" width="200" height="200" /> 
      <span>Melon</span> 
     </div> 
     <div> 
      <img src="img/fruit7.png" alt="fruit7" width="200" height="200" /> 
      <span>Lemon</span> 
     </div> 
     <div> 
      <img src="img/fruit8.png" alt="fruit8" width="200" height="200" /> 
      <span>Grapes</span> 
     </div> 
     <div> 
      <img src="img/fruit9.png" alt="fruit9" width="200" height="200" /> 
      <span>Peach</span> 
     </div> 
     <div> 
      <img src="img/fruit10.png" alt="fruit10" width="200" height="200" /> 
      <span>Pear</span> 
     </div> 
     <div> 
      <img src="img/fruit11.png" alt="fruit11" width="200" height="200" /> 
      <span>Strawberry</span> 
     </div> 
     <div> 
      <img src="img/fruit12.png" alt="fruit12" width="200" height="200" /> 
      <span>Melon</span> 
     </div> 
    </div> 
</div>

JavaScript

$(function() { 

    var $c = $('#carousel'), 
     $w = $(window); 

    $c.carouFredSel({ 
     align: false, 
     items: 10, 
     scroll: { 
      items: 1, 
      duration: 2000, 
      timeoutDuration: 0, 
      easing: 'linear', 
      pauseOnHover: 'immediate' 
     } 
    }); 


    $w.bind('resize.example', function() { 
     var nw = $w.width(); 
     if (nw < 990) { 
      nw = 990; 
     } 

     $c.width(nw * 3); 
     $c.parent().width(nw); 

    }).trigger('resize.example'); 

});

CSS

html, body { 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 
body { 
    background-color: #eee; 
    position: relative; 
    min-height: 300px; 
} 
body * { 
    font-family: Arial, Geneva, SunSans-Regular, sans-serif; 
    font-size: 14px; 
    color: #333; 
    line-height: 22px; 
} 

#wrapper { 
    background-color: #fff; 
    border-top: 1px solid #ccc; 
    width: 100%; 
    height: 50%; 
    margin-top: -1px; 
    position: absolute; 
    left: 0; 
    top: 50%; 
} 
#carousel { 
    margin-top: -100px; 
} 
#carousel div { 
    text-align: center; 
    width: 200px; 
    height: 250px; 
    float: left; 
    position: relative; 
} 
#carousel div img { 
    border: none; 
} 
#carousel div span { 
    display: none; 
} 
#carousel div:hover span { 
    background-color: #333; 
    color: #fff; 
    font-family: Arial, Geneva, SunSans-Regular, sans-serif; 
    font-size: 14px; 
    line-height: 22px; 
    display: inline-block; 
    width: 100px; 
    padding: 2px 0; 
    margin: 0 0 0 -50px; 
    position: absolute; 
    bottom: 30px; 
    left: 50%; 
    border-radius: 3px; 
}

источник

2014-05-17 16:17:48 Abram

 Смежные вопросы

  • Нет связанных вопросов^_^