滚动上点击不使用jQuery

Question

悬停我真的不知道jQuery的，所以我想与你的东西帮助..

我发现了一个自定义的滚动条（水平滑块），它在图像和箭头进行导航。

当您将鼠标悬停在箭头上时，当您将鼠标悬停在左侧箭头上时，它会自动开始向右移动。我想要的是使它“移动”，当我点击箭头，而不是当我徘徊在它。

下面是该文件的代码，

jQuery(function($) { 


// check for touchable device 
    var isTouch = false; 
    if(jQuery('html').hasClass('touch')){  
     isTouch = true;   
    } 

    //scrollpane parts 
    var scrollPane = jQuery(".scroll-pane"), 
     scrollContent = jQuery(".scroll-content"); 

    // set scrollInterval 
    var scrollInterval = 25, // scroll steps in px 
     timer_speed = 15 // scroll timer speed in milliseconds 

    // show scroll arrows on hover 
    scrollPane.hover( 
     function(){ 
      jQuery(".scroller-arrow:(.disabled)").stop(false, true).fadeIn(); 
     }, 
     function(){ 
      jQuery(".scroller-arrow:(.disabled)").stop(false, true).fadeOut(); 
     } 
    );    

    var speed = 0;  

    function prepareScrollerComponents() { 

     if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod'){ 
      jQuery("#scroll_left, #scroll_right").css({ display: 'block' }); 
     } 

     $cw = 0; 
     jQuery('li.item', scrollContent).each(function(){ 
      $cw = $cw + jQuery(this).outerWidth(true); 
     }) 

     scrollContent.width($cw); 

     // calculate the scrolling speed 
     speed = (scrollInterval * 30)/$cw; 

     setScrollerWidth(); 

     if(isTouch === true){ 

      scrollPane.css({ overflow: 'hidden'}).overscroll({ 
       direction: 'horizontal' 
      }).on('overscroll:dragstart overscroll:dragend overscroll:driftstart overscroll:driftend', function(event){ 
      })    

     }else{   
      scrollbar.slider('option', 'value', 0);   
     } 

     scrollContent.css({ visibility: 'visible' }); 
     scrollPane.css({ background: 'none' }); 

    } 

    jQuery(window).load(function(){ 

     prepareScrollerComponents(); 

    }); 

    jQuery(window).smartresize(function(){ 

     prepareScrollerComponents(); 

    }); 


    var slide_handler = function(e, ui) { 

     if(isTouch === false){ 

      if(ui.value == 0){ 
       jQuery("#scroll_left").addClass('disabled').stop(false, true).fadeOut(); 
       jQuery("#scroll_right").removeClass('disabled').stop(false, true).fadeIn(); 
      } 

      if(ui.value > 0 && ui.value < 100){ 
       jQuery("#scroll_left").removeClass('disabled').stop(false, true).fadeIn(); 
       jQuery("#scroll_right").removeClass('disabled').stop(false, true).fadeIn(); 
      } 
      if(ui.value == 100){ 
       jQuery("#scroll_left").removeClass('disabled').stop(false, true).fadeIn(); 
       jQuery("#scroll_right").addClass('disabled').stop(false, true).fadeOut(); 
      } 

     } 

     if (scrollContent.width() > scrollPane.width()) { 
      scrollContent.css("margin-left", Math.round(
       ui.value/100 * (scrollPane.width() - scrollContent.width()) 
      ) + "px"); 
     } else { 
      scrollContent.css("margin-left", 0); 
     } 
    };     

    //build slider 
    if(isTouch === false){ 
     var scrollbar = jQuery(".scroll-bar").slider({ 
      slide: slide_handler, 
      change: slide_handler 
     }); 
    } 

jQuery('.scroll-content-item:last').css({marginRight: 0}); 

jQuery(window).load(function(){ 

    if(isTouch === false){              

     // Mousewheel plugin 
     jQuery(scrollPane).add(jQuery(scrollPane).find('li')).mousewheel(function(event, delta) { 
      var value = scrollbar.slider('option', 'value'); 

      if (delta >= 0) { value -= speed; } 
      else if (delta <= 0) { value += speed; } 

      // Ensure that its limited between 0 and 100 
      value = Math.max(0, Math.min(100, value)); 

      scrollbar.slider('option', 'value', value); 

      event.preventDefault(); 

     }); 

    } 

}) 


var isiPad = navigator.userAgent.match(/iPad/i) != null; 
var isiPhone = navigator.userAgent.match(/iPhone/i) != null; 

// trigger for scroll right event 
$.fn.mouseenter_trigger_right = function(){ 

    var maxWidth = (scrollContent.width() - jQuery(window).width()) * -1 ; 

    timer = setInterval(function() { 

     jQuery("#scroll_left").removeClass('disabled').stop(false, true).fadeIn(); 

     var slider = jQuery('.scroll-bar'); 
     var curSlider = slider.slider("option", "value"); 
     curSlider += speed; // += and -= directions of scroling with MouseWheel 

     // Ensure that its limited between 0 and 100 
     curSlider = Math.max(0, Math.min(100, curSlider)); 

     if (curSlider > slider.slider("option", "max")){ 
      jQuery("#scroll_right").addClass('disabled'); 
      curSlider = slider.slider("option", "max"); 
     } else if (curSlider < slider.slider("option", "min")){ 
      curSlider = slider.slider("option", "min"); 
     }else{ 

     }     

     scrollbar.slider('option', 'value', curSlider);      

    }, timer_speed);      

} 

// trigger for scroll left event 
$.fn.mouseenter_trigger_left = function(){ 

    timer = setInterval(function() { 

     jQuery("#scroll_right").removeClass('disabled'); 

     var slider = jQuery('.scroll-bar');; 
     var curSlider = slider.slider("option", "value"); 
     curSlider -= speed; // += and -= directions of scroling with MouseWheel 

     // Ensure that its limited between 0 and 100 
     curSlider = Math.max(0, Math.min(100, curSlider));      

     if (curSlider > slider.slider("option", "max")){ 
      curSlider = slider.slider("option", "max"); 
     }else if (curSlider < slider.slider("option", "min")){ 
      jQuery("#scroll_left").addClass('disabled'); 
       curSlider = slider.slider("option", "min"); 
     } 

     scrollbar.slider('option', 'value', curSlider);     

    }, timer_speed); 


} 


if(isTouch === false){ 

    jQuery("#scroll_right").mouseenter(function(){ 
     jQuery(this).mouseenter_trigger_right(); 
    }); 

    jQuery("#scroll_left").mouseenter(function(){ 
     jQuery(this).mouseenter_trigger_left(); 
    }); 

    jQuery("#scroll_right,#scroll_left").mouseleave(function() { 
     clearInterval(timer); 
    });     

} 

function setScrollerWidth(){ 
    var origWidth = jQuery(".scroll-bar").width();//read the original slider width 
    var sliderWidth = origWidth;//the width through which the handle can move needs to be the original width minus the handle width 
    var sliderMargin = (origWidth - sliderWidth) * 0.5;//so the slider needs to have both top and bottom margins equal to half the difference     
    jQuery(".scroll-bar-wrap").css({ paddingRight: jQuery('.scroll-bar .ui-slider-handle').width() });//set the slider height and margins 
    jQuery(".scroll-bar").css({ right: jQuery('.scroll-bar .ui-slider-handle').width() }) 

    jQuery('.scroll-bar .ui-slider-handle').text('::'); 

} 

// Show the scroll-bar-wrap when all images are loaded 
jQuery('#portfolioList img').imagesLoaded(function(){ 
    jQuery('.scroll-bar-wrap').show(); 
})        

}）;

在此先感谢，让我知道它是否可能以及如何做到这一点。而不是的mouseenter功能

使用此代码

// start right moving 
jQuery("#scroll_right").click(function(){ 
    jQuery(this).mouseenter_trigger_right(); 
}); 

// start left moving 
jQuery("#scroll_left").click(function(){ 
    jQuery(this).mouseenter_trigger_left(); 
}); 

// stop moving 
jQuery("#scroll_stop").mouseleave(function() { 
    clearInterval(timer); 
}); 

，而不是下面的代码

Answer 1

使用点击功能。

jQuery("#scroll_right").mouseenter(function(){ 
    jQuery(this).mouseenter_trigger_right(); 
}); 

jQuery("#scroll_left").mouseenter(function(){ 
    jQuery(this).mouseenter_trigger_left(); 
}); 

jQuery("#scroll_right,#scroll_left").mouseleave(function() { 
    clearInterval(timer); 
});