jQuery UI 插件中的滑动条（Slider）工具集实现图片滑块滚动条的效果
初始效果：
初始代码：html
1 <body> 2 3 <div class="scroll-pane ui-widget ui-widget-header ui-corner-all"> 4 <div class="scroll-content"> <!--图片内容--> 5 <div class="scroll-content-item ui-widget-header">1</div> 6 <div class="scroll-content-item ui-widget-header">2</div> 7 <div class="scroll-content-item ui-widget-header">3</div> 8 <div class="scroll-content-item ui-widget-header">4</div> 9 <div class="scroll-content-item ui-widget-header">5</div> 10 <div class="scroll-content-item ui-widget-header">6</div> 11 <div class="scroll-content-item ui-widget-header">7</div> 12 <div class="scroll-content-item ui-widget-header">8</div> 13 <div class="scroll-content-item ui-widget-header">9</div> 14 <div class="scroll-content-item ui-widget-header">10</div> 15 <div class="scroll-content-item ui-widget-header">11</div> 16 <div class="scroll-content-item ui-widget-header">12</div> 17 <div class="scroll-content-item ui-widget-header">13</div> 18 <div class="scroll-content-item ui-widget-header">14</div> 19 <div class="scroll-content-item ui-widget-header">15</div> 20 <div class="scroll-content-item ui-widget-header">16</div> 21 <div class="scroll-content-item ui-widget-header">17</div> 22 <div class="scroll-content-item ui-widget-header">18</div> 23 <div class="scroll-content-item ui-widget-header">19</div> 24 <div class="scroll-content-item ui-widget-header">20</div> 25 </div> 26 <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> <!--滚动条对象--> 27 <div class="scroll-bar"></div> 28 </div> 29 </div> 30 </body>
css:
1 <style> 2 3 4 body { 5 font-size: 62.5%; 6 font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; 7 } 8 9 table { 10 font-size: 1em; 11 } 12 13 .demo-description { 14 clear: both; 15 padding: 12px; 16 font-size: 1.3em; 17 line-height: 1.4em; 18 } 19 20 .ui-draggable, .ui-droppable { 21 background-position: top; 22 } 23 .scroll-pane { 24 overflow: auto; 25 width: 99%; 26 float:left; 27 } 28 .scroll-content { 29 width: 2440px; 30 float: left; 31 } 32 .scroll-content-item { 33 width: 100px; 34 height: 100px; 35 float: left; 36 margin: 10px; font-size: 37 3em; 38 line-height: 96px; 39 text-align: center; 40 } 41 .scroll-bar-wrap { 42 clear: left; 43 padding: 0 4px 0 2px; 44 margin: 0 -1px -1px -1px; 45 } 46 .scroll-bar-wrap .ui-slider { 47 background: none; 48 border:0; 49 height: 2em; 50 margin: 0 auto; 51 } 52 .scroll-bar-wrap .ui-handle-helper-parent { 53 position: relative; 54 width: 100%; 55 height: 100%; 56 margin: 0 auto; 57 } 58 .scroll-bar-wrap .ui-slider-handle { 59 top:.2em; 60 height: 1.5em; 61 } 62 .scroll-bar-wrap .ui-slider-handle .ui-icon { 63 margin: -8px auto 0; 64 position: relative; 65 top: 50%; 66 } 67 </style>
通过移动滑块向右移动的效果：
1 <script> 2 $(function() { 3 //获取图片内容对象和包含图片内容和滑动条对象的div对象 4 var scrollPane = $( ".scroll-pane" ), 5 scrollContent = $( ".scroll-content" ); 6 7 //获取滑动条对象并进行相应的设置 8 var scrollbar = $( ".scroll-bar" ).slider({ 9 //设置发生滑动滑动柄事件时的触发事件 10 slide: function( event, ui ) { 11 if ( scrollContent.width() > scrollPane.width() ) { 12 scrollContent.css( "margin-left", Math.round( 13 ui.value / 100 * ( scrollPane.width() - scrollContent.width() ) 14 ) + "px" ); 15 } else { 16 scrollContent.css( "margin-left", 0 ); 17 } 18 } 19 }); 20 21 //改变图片的处理 22 var handleHelper = scrollbar.find( ".ui-slider-handle" ) 23 .mousedown(function() { 24 scrollbar.width( handleHelper.width() ); 25 }) 26 .mouseup(function() { 27 scrollbar.width( "100%" ); 28 }) 29 .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" ) 30 .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent(); 31 32 //设置超出的图片处于隐藏状态 33 scrollPane.css( "overflow", "hidden" ); 34 35 //设置滚动条滚动距离的大小和处理的比例 36 function sizeScrollbar() { 37 var remainder = scrollContent.width() - scrollPane.width(); 38 var proportion = remainder / scrollContent.width(); 39 var handleSize = scrollPane.width() - ( proportion * scrollPane.width() ); 40 scrollbar.find( ".ui-slider-handle" ).css({ 41 handleSize, 42 "margin-left": -handleSize / 2 43 }); 44 handleHelper.width( "" ).width( scrollbar.width() - handleSize ); 45 } 46 47 //获取滚动内容图片位置而设置整滑动柄的值 48 function resetValue() { 49 var remainder = scrollPane.width() - scrollContent.width(); 50 var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 : 51 parseInt( scrollContent.css( "margin-left" ) ); 52 var percentage = Math.round( leftVal / remainder * 100 ); 53 scrollbar.slider( "value", percentage ); 54 } 55 56 //根据窗口大小设置显示图片内容 57 function reflowContent() { 58 var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 ); 59 var gap = scrollPane.width() - showing; 60 if ( gap > 0 ) { 61 scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap ); 62 } 63 } 64 65 //根据窗口大小调整滑动柄上的位置 66 $( window ).resize(function() { 67 resetValue(); 68 sizeScrollbar(); 69 reflowContent(); 70 }); 71 72 setTimeout( sizeScrollbar, 10 );//0.1秒后执行方法sizeScrollbar 73 }); 74 </script>
总的代码：
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>图片滑块滚动条</title> 6 7 <script src="js/jquery-3.2.1.js"></script> 8 <script src="js/jquery-ui.js"></script> 9 <link href="js/jquery-ui.css" rel="stylesheet"> 10 11 <style> 12 13 14 body { 15 font-size: 62.5%; 16 font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif"; 17 } 18 19 table { 20 font-size: 1em; 21 } 22 23 .demo-description { 24 clear: both; 25 padding: 12px; 26 font-size: 1.3em; 27 line-height: 1.4em; 28 } 29 30 .ui-draggable, .ui-droppable { 31 background-position: top; 32 } 33 .scroll-pane { 34 overflow: auto; 35 width: 99%; 36 float:left; 37 } 38 .scroll-content { 39 width: 2440px; 40 float: left; 41 } 42 .scroll-content-item { 43 width: 100px; 44 height: 100px; 45 float: left; 46 margin: 10px; font-size: 47 3em; 48 line-height: 96px; 49 text-align: center; 50 } 51 .scroll-bar-wrap { 52 clear: left; 53 padding: 0 4px 0 2px; 54 margin: 0 -1px -1px -1px; 55 } 56 .scroll-bar-wrap .ui-slider { 57 background: none; 58 border:0; 59 height: 2em; 60 margin: 0 auto; 61 } 62 .scroll-bar-wrap .ui-handle-helper-parent { 63 position: relative; 64 width: 100%; 65 height: 100%; 66 margin: 0 auto; 67 } 68 .scroll-bar-wrap .ui-slider-handle { 69 top:.2em; 70 height: 1.5em; 71 } 72 .scroll-bar-wrap .ui-slider-handle .ui-icon { 73 margin: -8px auto 0; 74 position: relative; 75 top: 50%; 76 } 77 </style> 78 <script> 79 $(function() { 80 //获取图片内容对象和包含图片内容和滑动条对象的div对象 81 var scrollPane = $( ".scroll-pane" ), 82 scrollContent = $( ".scroll-content" ); 83 84 //获取滑动条对象并进行相应的设置 85 var scrollbar = $( ".scroll-bar" ).slider({ 86 //设置发生滑动滑动柄事件时的触发事件 87 slide: function( event, ui ) { 88 if ( scrollContent.width() > scrollPane.width() ) { 89 scrollContent.css( "margin-left", Math.round( 90 ui.value / 100 * ( scrollPane.width() - scrollContent.width() ) 91 ) + "px" ); 92 } else { 93 scrollContent.css( "margin-left", 0 ); 94 } 95 } 96 }); 97 98 //改变图片的处理 99 var handleHelper = scrollbar.find( ".ui-slider-handle" ) 100 .mousedown(function() { 101 scrollbar.width( handleHelper.width() ); 102 }) 103 .mouseup(function() { 104 scrollbar.width( "100%" ); 105 }) 106 .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" ) 107 .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent(); 108 109 //设置超出的图片处于隐藏状态 110 scrollPane.css( "overflow", "hidden" ); 111 112 //设置滚动条滚动距离的大小和处理的比例 113 function sizeScrollbar() { 114 var remainder = scrollContent.width() - scrollPane.width(); 115 var proportion = remainder / scrollContent.width(); 116 var handleSize = scrollPane.width() - ( proportion * scrollPane.width() ); 117 scrollbar.find( ".ui-slider-handle" ).css({ 118 handleSize, 119 "margin-left": -handleSize / 2 120 }); 121 handleHelper.width( "" ).width( scrollbar.width() - handleSize ); 122 } 123 124 //获取滚动内容图片位置而设置整滑动柄的值 125 function resetValue() { 126 var remainder = scrollPane.width() - scrollContent.width(); 127 var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 : 128 parseInt( scrollContent.css( "margin-left" ) ); 129 var percentage = Math.round( leftVal / remainder * 100 ); 130 scrollbar.slider( "value", percentage ); 131 } 132 133 //根据窗口大小设置显示图片内容 134 function reflowContent() { 135 var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 ); 136 var gap = scrollPane.width() - showing; 137 if ( gap > 0 ) { 138 scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap ); 139 } 140 } 141 142 //根据窗口大小调整滑动柄上的位置 143 $( window ).resize(function() { 144 resetValue(); 145 sizeScrollbar(); 146 reflowContent(); 147 }); 148 149 setTimeout( sizeScrollbar, 10 );//0.1秒后执行方法sizeScrollbar 150 }); 151 </script> 152 </head> 153 <body> 154 155 <div class="scroll-pane ui-widget ui-widget-header ui-corner-all"> 156 <div class="scroll-content"> <!--图片内容--> 157 <div class="scroll-content-item ui-widget-header">1</div> 158 <div class="scroll-content-item ui-widget-header">2</div> 159 <div class="scroll-content-item ui-widget-header">3</div> 160 <div class="scroll-content-item ui-widget-header">4</div> 161 <div class="scroll-content-item ui-widget-header">5</div> 162 <div class="scroll-content-item ui-widget-header">6</div> 163 <div class="scroll-content-item ui-widget-header">7</div> 164 <div class="scroll-content-item ui-widget-header">8</div> 165 <div class="scroll-content-item ui-widget-header">9</div> 166 <div class="scroll-content-item ui-widget-header">10</div> 167 <div class="scroll-content-item ui-widget-header">11</div> 168 <div class="scroll-content-item ui-widget-header">12</div> 169 <div class="scroll-content-item ui-widget-header">13</div> 170 <div class="scroll-content-item ui-widget-header">14</div> 171 <div class="scroll-content-item ui-widget-header">15</div> 172 <div class="scroll-content-item ui-widget-header">16</div> 173 <div class="scroll-content-item ui-widget-header">17</div> 174 <div class="scroll-content-item ui-widget-header">18</div> 175 <div class="scroll-content-item ui-widget-header">19</div> 176 <div class="scroll-content-item ui-widget-header">20</div> 177 </div> 178 <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> <!--滚动条对象--> 179 <div class="scroll-bar"></div> 180 </div> 181 </div> 182 </body> 183 </html>