![]()
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 list-style: none;
11 border:none;
12 }
13
14 #box{
15 width: 800px;
16 height: 200px;
17 border: 1px solid #ddd;
18
19 position: relative;
20 margin: 100px auto;
21
22 overflow: hidden;
23 }
24
25 #box ul{
26 width: 2600px;
27 position: absolute;
28 left: 0;
29 top: 20px;
30 }
31
32 #box ul li{
33 float: left;
34 }
35
36 #box_bottom{
37 position: absolute;
38 left: 0;
39 bottom: 0;
40 background-color: #e8e8e8;
41
42 width: 100%;
43 height: 25px;
44 }
45
46 .mask{
47 position: absolute;
48 left: 0;
49 top:0;
50 height: 25px;
51 background-color: orangered;
52 border-radius: 12px;
53 cursor: pointer;
54 }
55 </style>
56 </head>
57 <body>
58 <div id="box">
59 <ul id="box_top">
60 <li><img src="images/img1.jpg" alt=""></li>
61 <li><img src="images/img2.jpg" alt=""></li>
62 <li><img src="images/img3.jpg" alt=""></li>
63 <li><img src="images/img4.jpg" alt=""></li>
64 <li><img src="images/img5.jpg" alt=""></li>
65 <li><img src="images/img6.jpg" alt=""></li>
66 <li><img src="images/img7.jpg" alt=""></li>
67 <li><img src="images/img8.jpg" alt=""></li>
68 <li><img src="images/img1.jpg" alt=""></li>
69 <li><img src="images/img2.jpg" alt=""></li>
70 <li><img src="images/img1.jpg" alt=""></li>
71 <li><img src="images/img2.jpg" alt=""></li>
72 <li><img src="images/img3.jpg" alt=""></li>
73 <li><img src="images/img4.jpg" alt=""></li>
74 <li><img src="images/img5.jpg" alt=""></li>
75 <li><img src="images/img6.jpg" alt=""></li>
76 <li><img src="images/img7.jpg" alt=""></li>
77 <li><img src="images/img8.jpg" alt=""></li>
78 <li><img src="images/img1.jpg" alt=""></li>
79 <li><img src="images/img2.jpg" alt=""></li>
80 </ul>
81 <div id="box_bottom">
82 <span class="mask"></span>
83 </div>
84 </div>
85
86 <script>
87 window.onload = function () {
88 // 1. 获取需要的标签
89 var box = document.getElementById("box");
90 var box_top = document.getElementById("box_top");
91 var box_bottom = document.getElementById("box_bottom");
92 var mask = box_bottom.children[0];
93
94 // 2. 设置滚动条的长度
95 // 滚动条长度 = ( 盒子的宽度 / 内容的宽度) * 盒子的宽度
96 var mask_len = (box.offsetWidth / box_top.offsetWidth) * box.offsetWidth;
97 mask.style.width = mask_len + 'px';
98
99 // 3. 鼠标操作
100 mask.onmousedown = function (event) {
101 var e = event || window.event;
102
103 // 3.1 求出初始值
104 var beginX = e.clientX - mask.offsetLeft;
105
106 // 3.2 移动
107 document.onmousemove = function (event) {
108 var e = event || window.event;
109
110 // 3.3 求出移动的距离
111 var endX = event.clientX - beginX;
112
113 // 边界值
114 if(endX < 0){
115 endX = 0;
116 }else if(endX >= box.offsetWidth - mask.offsetWidth){
117 endX = box.offsetWidth - mask.offsetWidth;
118 }
119
120
121 // 3.4 动起来
122 mask.style.left = endX + 'px';
123
124 // 内容走的距离 = （内容的长度 - 盒子的长度） / (盒子长度 - 滚动条的长度) * 滚动条走的距离
125 var content_len = (box_top.offsetWidth - box.offsetWidth) / (box.offsetWidth - mask.offsetWidth) * endX;
126 box_top.style.left = -content_len + 'px';
127
128 return false;
129 };
130
131 document.onmouseup = function () {
132 document.onmousemove = null;
133 }
134 }
135 }
136 </script>
137 </body>
138 </html>
浙公网安备 33010602011771号