jQuery(document).ready(function($) { function"> jQuery(document).ready(function($) { function"> jQuery(document).ready(function($) { function" />

jQuery Image Rotator Script

Ik ben bezig met het bouwen van een eenvoudig rotatie script van jQuery image en ik zit vast aan het laatste stukje ervan. Ik wil kunnen klikken op de cijfers bovenaan het script om naar een specifieke dia in de diavoorstelling te gaan. De klik lijkt het juiste dianummer te registreren, maar de show doet niet wat het zou moeten doen.

Hier is de code:

<script type="text/javascript">

jQuery(document).ready(function($) {


    function reIndex() {

        if (dir == 'prev') {
            if (slide_curr == slide_min + 1) {
                slide_prev = slide_max;
                slide_curr = slide_min;
                slide_next = slide_min + 1;
            } else if (slide_curr == slide_min) {
                slide_prev = slide_max - 1;
                slide_curr = slide_max;
                slide_next = slide_min;
            } else {
                slide_curr = slide_prev;
                slide_prev = slide_curr - 1;
                slide_next = slide_curr + 1;
            }
        } else {
            if (slide_curr == slide_max - 1) {
                slide_prev = slide_max - 1;
                slide_curr = slide_max;
                slide_next = slide_min;
            } else if (slide_curr == slide_max) {
                slide_prev = slide_max;
                slide_curr = slide_min;
                slide_next = slide_min + 1;
            } else {
                slide_curr = slide_next;
                slide_prev = slide_curr - 1;
                slide_next = slide_curr + 1;
            }
        }

    }

    function doTransition() {

       //reset the z-index vals
        $(slides).css('z-index','1');
        $(slides[slide_curr]).css('z-index', '2');

       //turn on the display of the next slide
        if (dir == 'prev') {
            $(slides[slide_prev]).css('display','block');
        } else {
            $(slides[slide_next]).css('display','block');
        }

       //fade the current slide out (to zero opacity)
        $(slides[slide_curr]).fadeOut(900);

    }

    function printSelectors() {

        var li_string = '';
        var selector_class;
        for (var i=0; i<=slide_max; i++) {
            //display_num = i+1;
            display_num = '';
            if (slide_curr == i) {
                selector_class = ' class="current"';
            } else {selector_class = '';}
            li_string = li_string + '
  • '+display_num+'
  • '; } $('#bx_slider ul.slide-selectors').html(li_string); //click number selector $('#bx_slider ul.slide-selectors li').click(function() { slide_curr = $(this).index(); clickSlide(); $('#bx_state2').html('clicked: '+$(this).index());//just for debugging purposes slideShow_play(); }); } function reClassSelectors() { $('#bx_slider ul.slide-selectors li').removeClass('current'); $('#slider_sel_'+slide_curr).addClass('current'); } function clickSlide (clicked_slide_index) { //slide_curr = clicked_slide_index; if (slide_curr = slide_max) { slide_prev = slide_curr - 1; slide_next = slide_min; } else if (slide_curr == slide_min) { slide_prev = slide_max; slide_next = slide_curr + 1; } else { slide_prev = slide_curr - 1; slide_next = slide_curr + 1; } } function slideShow_play() { doTransition(); reIndex(); reClassSelectors(); printState(); if (is_paused != true) { timeout = setTimeout(slideShow_play, interval); } } function slideShow_start() { $(slides[slide_curr]).css('display','block'); printSelectors(); timeout = setTimeout(slideShow_play, 3000); } //just for debugging purposes function printState() { var state_str = 'slide_prev=' + slide_prev + '; slide_curr=' + slide_curr + '; slide_next=' + slide_next + '; slide_max=' + slide_max + '; slide_min=' + slide_min; $('#bx_state').html(state_str); } //set hover $('#bx_slider').hover(function() { is_paused = true; clearTimeout(timeout); }, function() { is_paused = false; dir = 'next'; timeout = setTimeout(slideShow_play, interval); }); //prev-next $('#bx_slider .slide-btns').click(function() { if ($(this).hasClass('prev')) {dir = 'prev';} else {dir = 'next';} slideShow_play(); }); //variables, initialize the settings var slides = $('#bx_slider .slide'); var interval = 4000; var is_paused = false; var dir = 'next'; var slide_min = 0; var slide_max = slides.length - 1; var slide_curr = 0; var slide_prev = slide_max; var slide_next = 1; //start it all off when the page loads slideShow_start(); }); </script> <div id="bx_slider"> <div class='slide-btns prev'></div> <div class='slide-btns next'></div>
      <div class='slide'> <div class='slide-caption'>hello world, slide one</div> </div> <div class='slide'> <div class='slide-caption'>hello world, slide two</div> </div> <div class='slide'> <div class='slide-caption'>hello world, slide three</div> </div> <div class='slide'> <div class='slide-caption'>hello world, slide four</div> </div> <div class='slide'> <div class='slide-caption'>hello world, slide five</div> </div> </div><!-- #bx_slider --> <div id='bx_state'></div> <div id='bx_state2'></div>

      Here is a link to the live code: http://www.exit44.com/slider/

      1

      2 antwoord

      Je code is te groot voor zoiets eenvoudigs.
      Je zou iets kunnen schrijven als:

      DEMO-GALERIE

      jQ:

      var stop=false, time, c=0, slidesN = $('#bx_slider .slide').length;
      for(var i=0; i'+(i+1)+'');
      }
      $('.slide-selectors li').eq(0).addClass('active');
      $('.slide:gt(0)').hide();
      function a(){
        $('.slide').eq(c).fadeTo(600,1).siblings('.slide').fadeTo(600,0);
        $('.slide-selectors li').eq(c).addClass('active').siblings('li').removeClass('active');
      } 
      function cc(){
        c = c%slidesN;
      }
      function aa(){
        if(stop){return;}
        clearTimeout(time);
        time = setTimeout(function(){
          c++;cc();a();aa();
        },2500);
      }
      aa();
      $('.slide-btns').click(function() {
         btn = $(this).hasClass('prev') ? (c--, cc(), a()) : (c++, cc(), a());
      });
      $('#bx_slider').bind('mouseenter mouseleave', function(e) {
         me_ml = ( e.type === 'mouseenter' ) ? ( stop=true, clearTimeout(time) ) : ( stop=false, aa() );
      });
      $('.slide-selectors li').bind('click',function(){
        var liInd = $(this).index();
        c=liInd;cc();a();
      });
      

      Het is 'foutloos' (zelfs als jsBin het schrijven van ternaries niet goed accepteert) en is kleiner en gemakkelijker te debuggen als u bekend bent met Modulo- en Ternary-operators.

      1
      toegevoegd
      @RET, bedankt! Ik heb zojuist dit antwoord gepost om Joe en David te laten zien hoe interessant en eenvoudig programmeren kan zijn met behulp van logische bewerkingen en de hulp van vooraf gedefinieerde functie 'stappen'.
      toegevoegd de auteur Roko C. Buljan, de bron
      Hoewel David de bug in de originele code heeft gevonden, is dit een veel beter voorbeeld van hoe je de intentie met jQuery kunt bereiken.
      toegevoegd de auteur RET, de bron
      Bedankt RET en roXon. Ik waardeer de suggesties. Ik zal het moeten lezen over Modulo en Ternary-operatoren. Ik heb nog nooit iets met die dingen gedaan.
      toegevoegd de auteur Joe Hoskinson, de bron

      Het lijkt erop dat je hier een typfout hebt:

      function clickSlide (clicked_slide_index) {
          //slide_curr = clicked_slide_index;
          if (slide_curr = slide_max) {
                  slide_prev = slide_curr - 1;
                  slide_next = slide_min;
              } else if (slide_curr == slide_min) {
                  slide_prev = slide_max;
                  slide_next = slide_curr + 1;
              } else {
                  slide_prev = slide_curr - 1;
                  slide_next = slide_curr + 1;
              }
      }
      

      U moet slide_curr = clicked_slide_index; uncomment en u moet (slide_curr = slide_max) wijzigen in (slide_curr == slide_max) zodat u niet overschrijven van de waarde van slide_curr met de waarde van slide_max .

      1
      toegevoegd
      Bedankt David. Het lijkt erop dat ik daardoor wat dichterbij ben gekomen. Het werkt nu. Dankjewel voor je hulp!
      toegevoegd de auteur Joe Hoskinson, de bron