ドキュメント<br>body {<br> margin: 0;<br>} <br>#wrap {<br> margin: 100px auto;<br> 位置: 相対;<br> 幅: 400px;<br> 高さ: 300px;<br> border: 5px 実線 # 000;<br>オーバーフロー:非表示;<br>}<br>#list {<br>位置:絶対;<br>左:0;<br>上:0;<br>幅:400%;<br>リストスタイル:なし;<br>パディング:0;<br>マージン:0 ;<br>}<br>#list li {<br> width: 25%;<br> float: left;<br>}<br>img {<br>vertical-align: top;<br>}<br>#navs {<br>position: 絶対;<br> left: 0;<br>bottom: 30px;<br>高さ:12px;<br>幅:100%;<br>text-align:center;<br>}<br>#navs a {<br>display:inline-block;<br>width:12px;<br>height:12px;<br>vertical-align:top ;<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 now = now>navs.length-1?navs.長さ-1:今;</p> <p> left = now * 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> navs[i].className = "";<br> }<br> navs[now].className = "active";<br> };<br> return false;//默承認イベント(この作用により画像被選択中を阻止)<br> };<br>})(); <br>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
