Jquery ui slider jQueryUI滑块未滚动div_Jquery Ui Slider

Jquery ui slider jQueryUI滑块未滚动div

Jquery ui slider jQueryUI滑块未滚动div,jquery-ui-slider,Jquery Ui Slider,我是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

我是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>


$（文档）.ready（函数（）{
var slideDrag，
滑动宽度=330，
滑动速度=200；
动画=假；
$（“.scroll slider”）.slider({
动画：幻灯片播放，
开始：checkType，
幻灯片：多斯利德，
最大：滑动宽度
});
//将每个滑块设置为一个值
$（“.scroll slider”）。每个（函数（索引）{
$（此）.slider（“值”，330/5*索引）；
});
//您也可以随时更改滑块，如下所示：
//$（“.scroll slider:eq（0）”）.slider（“value”，value）；
//
//这会将第一个滑块连同其内容一起移动到某个值
功能检查类型（e）{
slideDrag=$（e.originalEvent.target）.hasClass（“ui滑块句柄”）；
}
函数doSlide（e，ui）{
var target=$（e.target）.prev（“.scroll content”），
//如果滑块位于内容上方而不是下方，我们将使用：
//target=$（e.target）.next（“.scroll content”）
maxScroll=target.attr（“scrollWidth”）-target.width（）；
//现在需要检查类型，以防止新的更改处理程序在用户单击滑块时触发两次，
//因为“slide”和“change”事件都是在单击时触发的，但在设置slider时仅触发“change”
//通过代码手动输入值。
如果（e.type=='slide'）{
//是点击还是拖动？
如果（slideDrag==真）{
//用户拖动滑块头，匹配位置
attr（{scrollLeft:ui.value*（maxScroll/slideWidth）}）；
}
否则{
//用户单击滑块本身，设置动画以定位
target.stop（）.animate（{scrollLeft:ui.value*（maxScroll/slideWidth）}，slideSpeed）；
}
动画=真；
}
否则{
如果（动画===false）{
target.stop（）.animate（{scrollLeft:ui.value*（maxScroll/slideWidth）}，slideSpeed）；
}
动画=假；
}
}
});
/*设置滚动元素的样式*/
.scroll容器{填充底部：30px}
.滚动内容{宽度：330px；高度：110px；溢出：隐藏；页边距底部：10px}
.滚动内容{
宽度：880px；
高度：110px；
下页边距：5px
}
.滚动内容李{
浮动：左；
}
.ui滑块.ui滑块句柄{宽度：16px；高度：12px；位置：绝对；顶部：-3px；背景：#234786；边框：无}
多滑块控制演示

一,
二,
三,
四,
五,
六,
七,
八,

您是否正在尝试使用此演示

我也犯了同样的错误，用演示中使用的版本替换了我使用的

jQuery

，它成功了。

您是否查看了jQuery UI页面上的现成示例？-->