<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style type='text/css'> ul,ol,li{ list-style: none; margin:0; padding: 0;} img{ border:none;} .slide-player{ position: relative; width:470px; height:150px;overflow: hidden;} #tbSlideTrigger{ position: absolute; right: 30px; bottom: 10px; } #tbSlideTrigger li{ display: inline;} #tbSlideTrigger li a{float:left; width: 18px; height: 18px; line-height: 18px; border:1px solid #f27602; background-color: #FFB442; text-align: center;}//有了float:left后就display:inline-block就是多余了 #tbSlideTrigger a{ text-decoration: none; color: #D94B01; margin-right: 6px;} #tbSlideTrigger li.current a{ background-color: #fff;} </style> </head> <body> <div class='slide-player'> <ol class='tb-slide-list' id='tbSlideList'> <li><a href="#"><img src="http://img02.taobaocdn.com/tps/i2/T1C4dVXdxBXXXXXXXX-470-150.jpg"></a></li> <li><a href="#"><img width="470" height="150" src="http://img.alimama.cn/bcrm/adboard/picture/2010-12-24/101224112945761.jpg" /></a></li> <li><a href="#"><img width="470" height="150" src="http://img.alimama.cn/bcrm/adboard/picture/2010-12-23/101223120220401.jpg" /></a></li> <li><a href="#"><img width="470" height="150" src="http://img.alimama.cn/bcrm/adboard/picture/2010-12-24/101224151708468.jpg"></a></li> <li><a href="#"><img src="http://img01.taobaocdn.com/tps/i1/T1gyBVXgJfXXXXXXXX-470-150.jpg" /></a></li> </ol> <ul id='tbSlideTrigger'> <li><a href='#'>1</a></li> <li><a href='#'>2</a></li> <li><a href='#'>3</a></li> <li><a href='#'>4</a></li> <li><a href='#'>5</a></li> </ul> </div> <script type="text/javascript"> window.onload=function(){ var flag=0,timeout; var oMove = document.getElementById('tbSlideList'); var oClick = document.getElementById('tbSlideTrigger').getElementsByTagName('li'); /*move*/ var funMove = function(pos){ var move = function(){ var curPos = parseInt(oMove.style.marginTop,10) || 0; var speed = 40;//通过curPos-speed来实现动画，一直减到curPos-pos<speed if( Math.abs(curPos - pos) > speed ){ //往上后 curPos -= ((curPos-pos)/Math.abs(curPos-pos)) *speed; //判断方向 oMove.style.marginTop = curPos + 'px'; setTimeout(move,30); }else{ oMove.style.marginTop = pos +'px'; } } setTimeout(move(),30); } for(var i=0;i<oClick.length;i++){ oClick[i].onmouseover=(function(x){ return function(){//重重之重 clearTimeout(timeout); oClick[flag].className = ''; this.className = 'current'; console.log(x); funMove(-150*x); flag = x; }; })(i); oClick[i].onmouseout = (function(x){ return function(e){ timeout = setTimeout(step,4000); } })(i); //定时器播放动画 if(i==0){ oClick[i].className = 'current'; setTimeout(step,3000); } function step(){ var odot = document.getElementById('tbSlideTrigger').getElementsByTagName('li'); var num = flag; odot[num].className = ''; if(num<oClick.length-1){ num ++; }else{ num = 0; oMove.style.marginTop = 0; } odot[num].className = 'current'; oClick[num].className = 'current'; funMove(-150*num); flag = num; timeout = setTimeout(step,3000); } } } </script> </body> </html>
//在此时还少的一个jquery.中的stop(1,1)来实现效果，原生javascript是怎么写的呢
float:left;(左浮动)他使得指定元素脱离普通的文档流而产生的特别的布局特性。并且FLOAT必需应用在块级元素之上，也就是说浮动并不应用于内联标签。或者换句话来说当应用了FLOAT那么这个元素将被指定为块级元素。