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>