jQuery UI Slider滚动条中的鼠标滚轮控制

Question

我已经根据需要修改了jQuery UI Slider滚动条。 滑块的原始版本为http://jqueryui.com/slider/#side-scroll 1

我有html

<div class="ui-slide-range">
    <div id="sliderContent">        
        <div class="viewer ui-corner-all">
            <div class="content-conveyor ui-helper-clearfix">
                <div class="item">
                    <img src="img/item4.jpg" height="152" width="205" alt="">   
                </div>
            </div>
       </div>
       <div id="slider"></div>
    </div>
</div> 

和jQuery代码

$(function() {

//vars
var conveyor = $(".content-conveyor", $("#sliderContent")),
item = $(".item", $("#sliderContent"));

//set length of conveyor
conveyor.css("width", item.length * parseInt(item.css("width")));

    //config
    var sliderOpts = {
  max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
      slide: function(e, ui) { 
        conveyor.css("left", "-" + ui.value + "px");
      }
    };

    //create slider
    $("#slider").slider(sliderOpts);
  });

$( "#slider" ).slider({
            range: "min",
            value: 1,
            slide: function() {
                update();
            }
}); 

如何为该滑块添加鼠标滚轮动作？ 我使用搜索，发现了很多问题，但是答案对我没有帮助。 这里是一些问题的链接。 问题1 问题2

我已经做了整整一天的工作，我无法以任何方式解决问题，请帮忙。

JsFiddle链接在这里

Answer 1

DEMO jquery ui滑块，使用jquery mousewheel插件支持mousewheel

码：

$(function() {
    var value;
    $( "#slider" ).slider({
        slide: function( event, ui ) {
            value = $( "#slider" ).slider( "value" );
            $('#slider_val').html(value);
        }
    });

    value = $( "#slider" ).slider( "value" );
    $('#slider_val').html(value);

    $('#slider').on('mousewheel', function(event) {
        event.preventDefault();
        value = $( "#slider" ).slider( "value" );

        //console.log(event.deltaX, event.deltaY, event.deltaFactor);

        //Mousewheel Scrolled up
        if(event.deltaY == -1){
            //alert("scrolled down");
            value = value+1;
            $( "#slider" ).slider("value", value);
            $('#slider_val').html(value);
        }
        //Mousewheel Scrolled down
        else if(event.deltaY == 1){
            //alert("scrolled up");
            value = value-1;
            $( "#slider" ).slider( "value", value );
            $('#slider_val').html(value);
        }
    });

});     

Answer 2

（这篇文章的工作版本 ）

1. 您忘记了“移动”内容（ 滑块中类别为“ scroll-content”的div）
2. 已更改（向下滚动=查找新照片）

3. 内容和滑块的固定值

    setTimeout( sizeScrollbar, 10 );//safari wants a timeout $( ".scroll-pane" ).mousewheel(function (event, delta, deltaX, deltaY) { event.preventDefault(); var value = scrollbar.slider( "option", "value" ), // Get position of slider (% of 100%) value2 = scrollbar.slider( "option", "value" ), // Get position of slider (% of 100%) scrollSpeed = 75, widthFull = 2000; // variable (for help: getimagesize, widthNow += ImgWidth, widthFull += widthNow) scrollLimit = (-1) * widthFull + innerWidth; // innerWidth - browser's width value = (-1) * (value / 100) * widthFull + delta * scrollSpeed; value > 0 && (value = 0); // 'left' limit value < scrollLimit && (value = scrollLimit); // 'right' limit $(".scroll-content").css('margin-left', value ); // Setter for content value2 += -1 * delta * ( 100 / (widthFull / scrollSpeed) ); //100% / (count of times want to scroll) value2 < 0 && (value2 = 0); value2 > 100 && (value2 = 100); scrollbar.slider( "option", "value", value2 ); // Setter for slider }); 

Answer 3

我找到了解决此问题的方法，可能对某人有用。

setTimeout( sizeScrollbar, 10 );//safari wants a timeout
$( ".scroll-pane" ).mousewheel(function (event, delta, deltaX, deltaY) {event.preventDefault();
   var value = scrollbar.slider( "option", "value" );
   value -= delta;
   value > 100 && (value = 100);
   value < 0 && (value = 0);
scrollbar.slider( "option", "value", value );
        });

 });

只需要将包装器块添加到我的代码中即可。 谢谢大家

JsFiddle链接