Javascript 使用按钮滚动滑块_Javascript_Jquery_Html

Javascript 使用按钮滚动滑块

javascript jquery html

Javascript 使用按钮滚动滑块,javascript,jquery,html,Javascript,Jquery,Html,我使用jquery.com中的一个示例制作了一个滚动滑块，其中包含动态内容。现在我想知道如何制作左右图像按钮，以便控制滚动并删除滚动条 <html lang="en"> <head> <meta charset="utf-8" /> <title>jQuery UI Slider - Slider scrollbar</title> <link rel="stylesheet" href="http:/

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

<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 UI滑块-滑块滚动条
.滚动窗格{溢出：自动；宽度：99%；浮动：左；}
.滚动内容{宽度：2440px；浮动：左；}
.滚动内容项{宽度：100px；高度：100px；浮点：左；边距：10px；字体大小：3em；行高：96px；文本对齐：居中；}
*滚动内容项{display:inline；}/*IE6浮点双边距错误*/
.滚动条换行{清除：左；填充：0 4px 0 2px；边距：0-1px-1px-1px；}
.scroll bar wrap.ui滑块{背景：无；边框：0；高度：2米；边距：0自动；}
.scroll bar wrap.ui句柄辅助对象父对象{位置：相对；宽度：100%；高度：100%；边距：0自动；}
.scroll bar wrap.ui滑块句柄{顶部：.2em；高度：1.5em；}
.scroll bar wrap.ui滑块句柄.ui图标{边距：-8px自动0；位置：相对；顶部：50%；}
$（函数（）{
//滚动窗格部件
var scrollPane=$（“.scrollPane”），
滚动内容=$（“.scroll content”）；
//构建滑块
var scrollbar=$（“.scrollbar”）.slider({
幻灯片：功能（事件、用户界面）{
if（scrollContent.width（）>scrollPane.width（））{
css（“左边距”，Math.round(
ui.value/100*（scrollPane.width（）-scrollContent.width（））
)+“px”）；
}否则{
css（“左边距”，0）；
}
}
});
//将图标附加到句柄
var handleHelper=scrollbar.find（“.ui滑块句柄”）
.mousedown（函数（）{
scrollbar.width（handleHelper.width（））；
})
.mouseup（函数（）{
滚动条宽度（“100%”）；
})
.附加（“”）
.wrap（“”.parent（）；
//将溢出更改为隐藏，现在滑块可以处理滚动
css（“溢出”、“隐藏”）；
//按滚动距离成比例调整滚动条和手柄的大小
函数sizeScrollbar（）{
var rements=scrollContent.width（）-scrollPane.width（）；
变量比例=余数/scrollContent.width（）；
var handleSize=scrollPane.width（）-（比例*scrollPane.width（））；
scrollbar.find（“.ui滑块句柄”）.css({
宽度：把手大小，
“左边距”：-handleSize/2
});
handleHelper.width（“”.width（scrollbar.width（）-handleSize）；
}
//基于滚动内容位置重置滑块值
函数resetValue（）{
var rements=scrollPane.width（）-scrollContent.width（）；
var leftVal=scrollContent.css（“左边距”）==“自动”？0:parseInt（scrollContent.css（“左边距”）；
变量百分比=数学四舍五入（leftVal/余数*100）；
滚动条滑块（“值”，百分比）；
}
//如果滑块为100%，窗口变大，则显示内容
函数reflowContent（）{
var showing=scrollcont.width（）+parseInt（scrollcont.css（“左边距”），10）；
var gap=scrollPane.width（）-显示；
如果（间隙>0）{
css（“左边距”），parseInt（scrollContent.css（“左边距”），10）+间隙；
}
}
//更改窗口大小调整时的控制柄位置
$（窗口）。调整大小（函数（）{
重置值（）；
sizeScrollbar（）；
回流内容（）；
});
//初始滚动条大小
setTimeout（sizeScrollbar，10）；//safari需要一个超时
});
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
17
18
19
20

尝试使用jquery旋转木马滑块。这很简单。试试看

用jquery旋转木马滑块试试看。这很简单。试一试