个人中心
gpt4 book ai didi

javascript - 使用按钮滚动 slider

转载 作者：行者123 更新时间：2023-11-28 02:30:51 26 4
gpt4 key购买 nike

我使用了 jquery.com 中的一个示例来制作一个包含动态内容的滚动 slider 。现在我想知道如何制作左右图像按钮，以便我可以控制滚动并删除滚动条。

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>jQuery UI Slider - Slider scrollbar</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <style>
      .scroll-pane { overflow: auto; width: 99%; float:left; }
      .scroll-content { width: 2440px; float: left; }
      .scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; }
      * html .scroll-content-item { display: inline; } /* IE6 float double margin bug */
      .scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; }
      .scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto;  }
      .scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; }
      .scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; }
      .scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; }
    </style>
    <script>
      $(function() {
        //scrollpane parts
        var scrollPane = $( ".scroll-pane" ),
        scrollContent = $( ".scroll-content" );
        //build slider
        var scrollbar = $( ".scroll-bar" ).slider({
          slide: function( event, ui ) {
            if (scrollContent.width() > scrollPane.width() ) {
              scrollContent.css( "margin-left", Math.round(
                ui.value / 100 * ( scrollPane.width() - scrollContent.width())
              ) + "px" );
            } else {
              scrollContent.css( "margin-left", 0 );
            }
          }
        });
        //append icon to handle
        var handleHelper = scrollbar.find(".ui-slider-handle")
          .mousedown(function() {
            scrollbar.width(handleHelper.width());
          })
          .mouseup(function() {
            scrollbar.width("100%");
          })
          .append("<span class='ui-icon ui-icon-grip-dotted-vertical'></span>")
          .wrap("<div class='ui-handle-helper-parent'></div>").parent();
        //change overflow to hidden now that slider handles the scrolling
        scrollPane.css("overflow", "hidden");
        //size scrollbar and handle proportionally to scroll distance
        function sizeScrollbar() {
          var remainder = scrollContent.width() - scrollPane.width();
          var proportion = remainder / scrollContent.width();
          var handleSize = scrollPane.width() - (proportion * scrollPane.width());
          scrollbar.find(".ui-slider-handle").css({
            width: handleSize,
            "margin-left": -handleSize / 2
          });
          handleHelper.width("").width(scrollbar.width() - handleSize);
        }
        //reset slider value based on scroll content position
        function resetValue() {
          var remainder = scrollPane.width() - scrollContent.width();
          var leftVal = scrollContent.css("margin-left") === "auto" ? 0 : parseInt( scrollContent.css("margin-left"));
          var percentage = Math.round(leftVal / remainder * 100);
          scrollbar.slider("value", percentage);
        }
        //if the slider is 100% and window gets larger, reveal content
        function reflowContent() {
          var showing = scrollContent.width() + parseInt(scrollContent.css("margin-left" ), 10);
          var gap = scrollPane.width() - showing;
          if (gap > 0) {
            scrollContent.css("margin-left", parseInt(scrollContent.css("margin-left"), 10 ) + gap);
          }
        }
        //change handle position on window resize
        $(window).resize(function() {
          resetValue();
          sizeScrollbar();
          reflowContent();
        });
        //init scrollbar size
        setTimeout( sizeScrollbar, 10 );//safari wants a timeout
      });
    </script>
  </head>
  <body>
    <div class="scroll-pane ui-widget ui-widget-header ui-corner-all">
      <div class="scroll-content">
        <div class="scroll-content-item ui-widget-header">1</div>
        <div class="scroll-content-item ui-widget-header">2</div>
        <div class="scroll-content-item ui-widget-header">3</div>
        <div class="scroll-content-item ui-widget-header">4</div>
        <div class="scroll-content-item ui-widget-header">5</div>
        <div class="scroll-content-item ui-widget-header">6</div>
        <div class="scroll-content-item ui-widget-header">7</div>
        <div class="scroll-content-item ui-widget-header">8</div>
        <div class="scroll-content-item ui-widget-header">9</div>
        <div class="scroll-content-item ui-widget-header">10</div>
        <div class="scroll-content-item ui-widget-header">11</div>
        <div class="scroll-content-item ui-widget-header">12</div>
        <div class="scroll-content-item ui-widget-header">13</div>
        <div class="scroll-content-item ui-widget-header">14</div>
        <div class="scroll-content-item ui-widget-header">15</div>
        <div class="scroll-content-item ui-widget-header">16</div>
        <div class="scroll-content-item ui-widget-header">17</div>
        <div class="scroll-content-item ui-widget-header">18</div>
        <div class="scroll-content-item ui-widget-header">19</div>
        <div class="scroll-content-item ui-widget-header">20</div>
      </div>
      <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom">
        <div class="scroll-bar"></div>
      </div>
    </div>
  </body>
</html>

最佳答案

尝试使用 jquery 轮播 slider 。这是一个简单的。试试this example

关于javascript - 使用按钮滚动 slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14189568/

26 4 0
文章推荐： javascript - 计算鼠标和 DOM 元素边缘之间的距离
文章推荐： c++ - 如何使用 库将二进制转换为十进制？
文章推荐： javascript - 删除 Ul 警报
文章推荐： javascript - 无法使用 iPhone 触摸 html 表单
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com