jQuery UI 自动幻灯片

发布于 2025-01-03 11:13:28 字数 523 浏览 3 评论 0原文

我有以下 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>

i have following code for jQuery UI vertical slider, but i need auto slide (auto scroll) that slider.
(auto slide on page load)

anyone can help?

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

半岛未凉 2025-01-10 11:13:28
    $(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)   });
    }
});

添加滚动条如下:


    $(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)   });
    }
});

add the scroller as follow:
<div id="slider"></div>
<div id="scroller">

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文