跳轉到下一張幻燈片onClick

Question

我已經創建了一個帶有箭頭的滑塊，該滑塊可以正常工作，但是我需要在內部滑塊上添加一個鏈接，該鏈接點擊下一張幻燈片。

我的代碼如下。

<script type="text/javascript"> 
    $(function() { 

    var Page = (function() { 

     var $navArrows = $('#nav-arrows'), 
     $nav = $('#nav-dots > span'), 
     slitslider = $('#slider').slitslider({ 
     onBeforeChange: function (slide, pos) { 
      $nav.removeClass('nav-dot-current'); 
      $nav.eq(pos).addClass('nav-dot-current'); 
     } 
     }), 

     init = function() { 
     initEvents(); 
     }, 

     initEvents = function() { 

     // add navigation events 
     $navArrows.children(':last').on('click', function() { 
      slitslider.next(); 

      return false; 
     }); 

     $navArrows.children(':first').on('click', function() { 
      slitslider.previous(); 

      return false; 
     }); 

     $nav.each(function (i) { 
      $(this).on('click', function (event) { 
      var $dot = $(this); 
      if (!slitslider.isActive()) { 
       $nav.removeClass('nav-dot-current'); 
       $dot.addClass('nav-dot-current'); 
      } 
      slitslider.jump(i + 1); 

      return false; 
      }); 
     }); 
     }; 

     return { init: init }; 
    })(); 

    Page.init(); 
    }); 
</script> 

我在幻燈片上用來移動的HTML如下。

<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5"> 
    <div class="sl-slide-inner"> 

    <div class=""> 
     <a href="#" class="anhrClr custAnchr"><span class="splAncStl"><nav id="nav-arrows1"> 
     <span>Click to next slide</span> 
     </nav></span></a> 
    </div> 
    </div> 
</div> 

Answer 1

您可以使用$ .trigger（'click'）模擬點擊事件。嘗試綁定您要推遲事件喜歡這個<a>：

$('a.anhrClr.custAnchr').on('click', function(e) { 
    $('.nav-arrow-next').trigger('click'); 
    e.preventDefault(); 
    return false; 
}); 

編輯：爲了澄清，e.preventDefault()和return false;是爲了防止瀏覽器處理點擊到錨元素。否則，您的瀏覽器可能會滾動到頁面頂部，並顯示href="#"或執行其他不需要的操作。

Answer 2

case arrow.right : 

        self._stopSlideshow(); 
        self._navigate('next'); 
        break; 

這是鍵盤導航代碼。所以，你可以嘗試

$('.anhrClr').click(function(){ 
    slitslider._navigate('next'); 
    return false; 
}); 

查找例如DOC請 - http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/

UPDATE 在例子中，我們可以發現_navigate功能：

_navigate : function(dir, pos) { 

    if(this.isAnimating || this.slidesCount < 2) { 

     return false; 

    } 

    this.isAnimating = true; 

    var self = this, 
     $currentSlide = this.$slides.eq(this.current); 

    // if position is passed 
    if(pos !== undefined) { 

     this.current = pos; 

    } 
    // if not check the boundaries 
    else if(dir === 'next') { 

     this.current = this.current < this.slidesCount - 1 ? ++this.current : 0; 

    } 
    else if(dir === 'prev') { 

     this.current = this.current > 0 ? --this.current : this.slidesCount - 1; 

    } 

    this.options.onBeforeChange($currentSlide, this.current); 

    // next slide to be shown 
    var $nextSlide = this.$slides.eq(this.current), 
     // the slide we want to cut and animate 
     $movingSlide = (dir === 'next') ? $currentSlide : $nextSlide, 

     // the following are the data attrs set for each slide 
     configData = $movingSlide.data(), 
     config = {}; 

    config.orientation = configData.orientation || 'horizontal', 
    config.slice1angle = configData.slice1Rotation || 0, 
    config.slice1scale = configData.slice1Scale || 1, 
    config.slice2angle = configData.slice2Rotation || 0, 
    config.slice2scale = configData.slice2Scale || 1; 

    this._validateValues(config); 

    var cssStyle = config.orientation === 'horizontal' ? { 
      marginTop : -this.size.height/2 
     } : { 
      marginLeft : -this.size.width/2 
     }, 
     // default slide's slices style 
     resetStyle = { 
      'transform' : 'translate(0%,0%) rotate(0deg) scale(1)', 
      opacity : 1 
     }, 
     // slice1 style 
     slice1Style = config.orientation === 'horizontal' ? { 
      'transform' : 'translateY(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')' 
     } : { 
      'transform' : 'translateX(-' + this.options.translateFactor + '%) rotate(' + config.slice1angle + 'deg) scale(' + config.slice1scale + ')' 
     }, 
     // slice2 style 
     slice2Style = config.orientation === 'horizontal' ? { 
      'transform' : 'translateY(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')' 
     } : { 
      'transform' : 'translateX(' + this.options.translateFactor + '%) rotate(' + config.slice2angle + 'deg) scale(' + config.slice2scale + ')' 
     }; 

    if(this.options.optOpacity) { 

     slice1Style.opacity = 0; 
     slice2Style.opacity = 0; 

    } 

    // we are adding the classes sl-trans-elems and sl-trans-back-elems to the slide that is either coming "next" 
    // or going "prev" according to the direction. 
    // the idea is to make it more interesting by giving some animations to the respective slide's elements 
    //(dir === 'next') ? $nextSlide.addClass('sl-trans-elems') : $currentSlide.addClass('sl-trans-back-elems'); 

    $currentSlide.removeClass('sl-trans-elems'); 

    var transitionProp = { 
     'transition' : 'all ' + this.options.speed + 'ms ease-in-out' 
    }; 

    // add the 2 slices and animate them 
    $movingSlide.css('z-index', this.slidesCount) 
       .find('div.sl-content-wrapper') 
       .wrap($('<div class="sl-content-slice" />').css(transitionProp)) 
       .parent() 
       .cond(
        dir === 'prev', 
        function() { 

         var slice = this; 
         this.css(slice1Style); 
         setTimeout(function() { 

          slice.css(resetStyle); 

         }, 50); 

        }, 
        function() { 

         var slice = this; 
         setTimeout(function() { 

          slice.css(slice1Style); 

         }, 50); 

        } 
       ) 
       .clone() 
       .appendTo($movingSlide) 
       .cond(
        dir === 'prev', 
        function() { 

         var slice = this; 
         this.css(slice2Style); 
         setTimeout(function() { 

          $currentSlide.addClass('sl-trans-back-elems'); 

          if(self.support) { 

           slice.css(resetStyle).on(self.transEndEventName, function() { 

            self._onEndNavigate(slice, $currentSlide, dir); 

           }); 

          } 
          else { 

           self._onEndNavigate(slice, $currentSlide, dir); 

          } 

         }, 50); 

        }, 
        function() { 

         var slice = this; 
         setTimeout(function() { 

          $nextSlide.addClass('sl-trans-elems'); 

          if(self.support) { 

           slice.css(slice2Style).on(self.transEndEventName, function() { 

            self._onEndNavigate(slice, $currentSlide, dir); 

           }); 

          } 
          else { 

           self._onEndNavigate(slice, $currentSlide, dir); 

          } 

         }, 50); 

        } 
       ) 
       .find('div.sl-content-wrapper') 
       .css(cssStyle); 

    $nextSlide.show(); 

}