문서<br>body {<br> margin: 0;<br>} <br>#wrap {<br> margin: 100px auto;<br> position:relative;<br> width: 400px;<br> height: 300px;<br> border: 5px solid # 000;<br> 오버플로: 숨겨진;<br>}<br>#list {<br> 위치: 절대;<br> 왼쪽: 0;<br> 위쪽: 0;<br> 너비: 400%;<br> 목록 스타일: 없음;<br> 패딩: 0;<br> 여백: 0 ;<br>}<br>#list li {<br> 너비: 25%;<br> float: 왼쪽;<br>}<br>img {<br> 수직 정렬: 위쪽;<br>}<br>#navs {<br> 위치: 절대;<br> 왼쪽: 0;<br> 아래쪽: 30px;<br> 높이: 12px;<br> 너비: 100%;<br> 텍스트 정렬: 중앙;<br>}<br>#navs a {<br> 디스플레이: 인라인 블록;<br> 너비: 12px;<br> 높이: 12px;<br> 수직 정렬: 상단 ;<br> 배경: #fff;<br> 여백: 0 5px;<br> 테두리 반경: 6px;<br>}<br>#navs .active {<br> 배경: #f60;<br>}<br>< ;body> < ;a href="javascript:;"> < /script><br><script type="text/javascript"><br>(function(){<br> var Wrap = document.querySelector('#wrap');<br> var list = document.querySelector('#list'); <br> var navs = document.querySelectorAll('#navs a');<br> var WrapW = css(wrap,"width");<br> list.onmousedown = function(e){<br>clearInterval(list.timer);//清除动画<br> var startMouseX = e.clientX;<br> var elX = css(list,"left");<br> document.onmousemove = function(e){<br> var nowMouseX = e.clientX;<br> css(list,"left",nowMouseX - startMouseX + elX);<br> };<br> document.onmouseup = function(e){<br> document.onmousemove = null;<br> document.onmouseup = null;<br> var left = css(list,"left");<br> var now = - Math.round(left/wrapW); //获取到走了几张图<br> console.log(now);<br> now = now<0?0:now;<br> now = now>navs.length-1?navs. 길이-1:지금;</p> <p> 왼쪽 = 이제 * WrapW;//计算走到这张图 left需要走的距离<br> startMove({<br> el: list,<br> target: {<br> left: -left<br> },<br> type: "easeOutStrong",<br> time : 800<br> });<br> for(var i = 0; i < navs.length; i++){<br> navs[i].className = "";<br> }<br> navs[now].className = "active";<br> };<br> return false;//阻止默认事件(在这的 作用阻止图文被选中)<br> };<br>})(); <br>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
