0
我是jquery的新手，很抱歉，如果這是一個漫長的問題。以下是我想出了一個水平滑塊來滾動包含圖像列表的div。 結果是滑塊不滾動div。任何幫助都會很棒。jQueryUI滑塊不滾動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>
你看過jQuery UI頁面上準備好的示例嗎？ - > http://jqueryui.com/demos/slider/#side-scroll – tpeczek