Document<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> overflow: hidden;<br>}<br>#list {<br> position: absolute;<br> left: 0;<br> top: 0;<br> width: 400%;<br> list-style: none;<br> padding: 0;<br> margin: 0;<br>}<br>#list li {<br> width: 25%;<br> float: left;<br>}<br>img {<br> vertical-align: top;<br>}<br>#navs {<br> position: absolute;<br> left: 0;<br> bottom: 30px;<br> height: 12px;<br> width: 100%;<br> text-align: center;<br>}<br>#navs a {<br> display: inline-block;<br> width: 12px;<br> height: 12px;<br> vertical-align: top;<br> background: #fff;<br> margin: 0 5px;<br> border-radius: 6px;<br>}<br>#navs .active {<br> background: #f60;<br>}<br> <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.length-1:now;</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++){<br> navs[i].className = "";<br> }<br> navs[now].className = "active";<br> };<br> return false;//阻止默认事件(在这的作用阻止图片被选中)<br> };<br>})(); <br>
