<元字元集="UTF-8"><標題> ;文檔<br>body {<br> 邊距: 0;<br>} <br>#wrap {<br> 邊距: 100px 自動;<br> 位置：相對；<br> 寬度：400 像素；<br> 高度：300 像素；<br> 邊框：5 像素實心#000;<br> 溢出：隱藏；<br>}<br>#list {<br> 位置：絕對；<br> 左：0；<br> 頂部：0；<br> 寬度：400%；<br> 清單樣式：無；<br> 填滿：0;<br> 邊距：0 ;<br>#}<br>#list li {<br> 寬度：25%;<br> 浮動：左；<br>}<br>img {<br> 垂直對齊：頂部； <br>}<br>#navs {<br> 位置：絕對；<br> 左：0;<br> 底部：30px;<br> 高度：12px;<br> 寬度：100%;<br> 文本對齊：居中；<br>}<br>#導航{<br>顯示：內聯區塊;<br>寬度：12px;<br>高度：12px;<br> 垂直對齊：頂部;<br>背景： #fff ;<br> 邊距：0 5px;<br> 邊框半徑：6px;<br>}<br>#navs .active {<br> 背景：#f60;<br>}<br>; ;< img src="pic/1.jpg"/> < li> <腳本類型="text/javascript " src="startmove.js"><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.長度-1？ navs.length-1：現在；</p> <p> left = now * wrapW;//計算走到這張圖左邊需要走的距離<br> startMove({<br> el: list,<br> target: {<br> left: -left<br> },<br> 類型: "easeOutStrong",<br> 時間: 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>
