Question

我是jquery的新手，如果这是一个冗长的问题，请道歉。以下是我想出的水平滑块滚动包含图像列表的div。结果是滑块不滚动div。任何帮助都会很棒。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 

<script type="text/javascript">
$(document).ready(function(){
var slideDrag,
slideWidth = 330,
slideSpeed = 200;
animated = false;

    $(".scroll-slider").slider({
    animate: slideSpeed,
    start: checkType,
    slide: doSlide,
    max: slideWidth 
});


    // Set each slider to a value
    $(".scroll-slider").each(function(index){
        $(this).slider("value", 330 / 5 * index);
    });

    // You can also change a slider at any time like so:
    // $(".scroll-slider:eq(0)").slider("value", value);
    //
    // That would move the first slider to a value, along with its content

    function checkType(e){
        slideDrag = $(e.originalEvent.target).hasClass("ui-slider-handle");
    }

    function doSlide(e, ui){
        var target = $(e.target).prev(".scroll-content"),
        // If sliders were above the content instead of below, we'd use:
        // target = $(e.target).next(".scroll-content")
        maxScroll = target.attr("scrollWidth") - target.width();

        // Need to check type now to prevent the new change handler from firing twice when user clicks on slider,
        // because both 'slide' and 'change' events are fired on a click, but only a 'change' when setting slider
        // value manually via code.
        if (e.type == 'slide'){
            // Was it a click or drag?
            if (slideDrag === true){
                // User dragged slider head, match position
                target.attr({scrollLeft: ui.value * (maxScroll / slideWidth) });
            }
            else{
                // User clicked on slider itself, animate to position
                target.stop().animate({scrollLeft: ui.value * (maxScroll / slideWidth) }, slideSpeed);
            }
            animated = true;
        }
        else{
            if (animated === false){
                target.stop().animate({scrollLeft: ui.value * (maxScroll / slideWidth) }, slideSpeed);
            }
            animated = false;
        }
    }

});
</script>

</script>

<style>
    /* Styling the scroll elements */
        .scroll-container{padding-bottom:30px}
        .scroll-content{width:330px;height:110px;overflow:hidden;margin-bottom:10px}

        .scroll-content ul{
            width:880px; 
            height:110px; 
            margin-bottom:5px
        }
        .scroll-content li{
            float:left; 
            }
        .ui-slider .ui-slider-handle{width:16px;height:12px;position:absolute;top:-3px;background:#234786;border:none}
    </style>




  <body>  
   <div id="wrapper">
    <h2>Multiple Slider Control Demo</h2>
    <div id="left">
        <div class="scroll-container">
            <div class="scroll-content">
                <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
        </ul> 
    </div> 
    </div>
    <div class="scroll-slider"></div> 
</div>
</div>

Answer 1

您是否尝试使用此演示？

http://cnanney.com/journal/demo/div-slide/

我遇到了同样的错误，并将我正在使用的jQuery版本替换为演示中使用的版本，并且有效。

jQueryUI Slider不滚动div

1 个答案: