Question

我的网站上有一个滑块旋转器，但它不会在框中自动旋转项目 - 导航工作和旋转但我希望它在我进入网站后自动旋转。这是我的js：

$(document).ready(function() {

   var nbr = 0;
   $('.slider').each(function() {
      var slider = $(this);

   //get width and height of the wrapper and give it to the UL
    var wrapperwidth = $(slider).width() *  $(slider).find('ul > li').size();
    $(slider).find('ul').css('width', wrapperwidth);
    var wrapperheight = $(slider).height();
    $(slider).find('ul').css('height', wrapperheight);


   //set my li width
    var width = $(slider).width();
    $(slider).find('ul li').css('width', width);

   //set my counter vars
    var counter = $(slider).find('ul > li').size();
    var decount = 1;
    var autocount = 1;

      if (counter > 1) {
      //create my number navigation
        var createNum = 1;
         $(slider).after('<ul class="numbers"><li></li></ul>');
        var numbers = $(slider).parent().find('.numbers');
         $(numbers).find('li:first-child').html(createNum+'_'+nbr).addClass('activenum').attr('id', 'id1_'+nbr);
        while ( createNum != counter) {
            createNum++;
           $(numbers).append("<li id='id"+createNum+"_"+nbr+"'>"+createNum+"_"+nbr+"</li>");
        }

      //get my number-width (number navigation should always be centered)
        var numwidth = $(slider).find('.numbers li:first-child').width() * $(slider).find('.numbers li').size();
        $(slider).find('.numbers').css('width', numwidth);
      }

      nbr++;
   });



   //make the number clickable
   $(".numbers li").click(function() {
      var slider = $(this).closest('.sliderWrapper');
      var slider0 = $(slider).find('.slider');
    var clickednum = $(this).html().split('_')[0] * - $(slider0).width() + $(slider0).width();
    $(slider0).find('ul').animate({ left: clickednum }, 400, 'swing', function() { });
    $(slider).find('.activenum').removeClass('activenum');
    $(this).addClass('activenum');
    decount = $(this).html();
   });



   rotateSwitch = function(sliderW, speed) {
      var sliderWrap = sliderW;
      play = setInterval(function() {
         var nextNum = parseInt($($(sliderWrap).find(".numbers li.activenum")).html().split('_')[0])+1;
         if (nextNum > $(sliderWrap).find(".numbers li").length) {
            nextNum = 1;
         }
         //console.log("nextnum: "+nextNum+", numbers length: "+$(sliderWrap).find(".numbers li").length);
         $(sliderWrap).find(".numbers li").each(function() {
            if( parseInt($(this).html().split('_')[0]) == nextNum )
               $(this).click();
         });
      }, speed);
   };

   makeAutoSlide = function(sliderWrap, speed) {
      if ($(sliderWrap).length > 0 && $(sliderWrap).find(".numbers li").length > 1) {
         rotateSwitch(sliderWrap, speed);

         $(sliderWrap).find(".slider li").hover(function() {
            if ($(sliderWrap).find(".numbers li").length > 1) {
               clearInterval(play); //Stop the rotation
            }
        }, function() {
           if ($(sliderWrap).find(".numbers li").length > 1) {
               rotateSwitch(sliderWrap, speed); //Resume rotation timer
           }
        });
      }
   };


});

我不确定这是否是setInterval和clearInterval的问题，或者我写错了。

我把代码放在jsFiddle中，所以你知道结构是怎么样的。 http://jsfiddle.net/gecbjerd/1/

我感谢您的帮助。干杯

jQuery滑块不会旋转

0 个答案: