Question

我有以下jQuery UI垂直滑块的代码，但我需要自动滑动（自动滚动）该滑块。（页面加载时自动滑动）

任何人都可以提供帮助吗？

<script>$(function() {
var scrollPane = $('#content-scrolls'),
    scrollableHeight = scrollPane.height() - scrollPane.parent().height() || 0;  
$("#slider-vertical").slider({
  orientation: "vertical",
  range: "max",
  min: 0,
  max: scrollableHeight,
  value: scrollableHeight,
  animate: true, 
  slide: function(event, ui) {
    scrollPane.css({top: ui.value - scrollableHeight});
  }
});  }); </script>

Answer 1

    $(function() {
    var scrollPane = $('#content-scrolls'),
        scrollableHeight = scrollPane.height() - scrollPane.parent().height() || 0;
    $("#slider-vertical").slider(
    { change: handleChange,
        slide: handleSlide,
        orientation: "vertical",
        range: "max",
        min: 0,
        max: scrollableHeight,
        value: scrollableHeight,
        animate: true,
    });
    setTimeout(scrollWindow, 1000);
    function scrollWindow() {
        var slideValue;
        slideValue = $("#slider-vertical").slider("value");
        if(slideValue > -100)
        {
              $("#slider").slider("value", slideValue - 1);
               setTimeout(scrollWindow, 1000);
        }
    }
    function handleChange(e, ui) {
        var maxScroll = $("#scroller").attr("scrollHeight") -$("#scroller").height();
        $("#scroller").animate({ scrollTop: -ui.value *(maxScroll / 100)}, 1000);

    }
    function handleSlide(e, ui) {
        var maxScroll = $("#scroller").attr("scrollHeight") -$("#scroller").height();
        $("#scroller").attr({ scrollTop: -ui.value* (maxScroll / 100)   });
    }
});

添加滚动条如下： <div id="slider"></div> <div id="scroller">

jQuery UI自动幻灯片

1 个答案: