【原生javascript】margin-top实现淘宝首页图片滚动

<!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那么这个元素将被指定为块级元素。

转载于:https://www.cnblogs.com/positive/p/3894808.html

【原生javascript】margin-top实现淘宝首页图片滚动

猜你喜欢