运动版的轮播图，有左右按钮和单独分页

这个例子重点在于：

运动框架的复习，要灵活运动回调函数
始终以全局变量iNum来控制oUl的移动目的地，每次有任何动作，都是先判断iNum并改变iNum后去调用运动函数
刚才在复查代码的时候发现个奇怪的现象，在ie11和cent browser打开的时候居然不会滚动，iNum倒是在变化，突然想到之前在看妙味课堂的时候有老师提到一句，给要运动的元素，在加上position:absolute后，如果不加上left:0;top:0会有兼容问题，所以，我给oUl加上了left:0;top:0;就解决了问题。


<style>
ul,h2,p{
    padding: ;margin: ;list-style: none;
}
#wrap{
    width: 600px;
    height: 450px;
    border: 1px solid black;
    margin: 100px auto;
    position: relative;
    overflow: hidden;
}
img{
    width: 600px;height: 450px;
}
ul{
    overflow: hidden;
    position: absolute;
}
#list{
    width: 3600px;
    left: ;top: ;
}
li{
 float: left;
}
span{
    position: absolute; 
    width: 40px;height: 40px;
    font-weight: bold;
    font-size: 34px;
    line-height: 40px;
    opacity: 0.6;
    text-align: center;
    top: %;
    margin-top: -20px;
    background: white;
    z-index: ;
}
#left{
    left: ;
}
#right{
    right: ;
}
span:hover{
    cursor: pointer;
    background: orangered;
}
#btns{
    bottom: 10px;right: 10px;
}
#btns li{
    width: 15px;height: 15px;
    background: orange;
    margin: 4px;
    cursor: pointer;
}
#btns li.active{
    background: orangered;
}
</style>
<script type="text/javascript">
window.onload = function(){
 var oUl = document.getElementById('list');
 var aLi = oUl.getElementsByTagName('li');
 var aSpan = document.getElementsByTagName('span');
 var oBtn = document.getElementById('btns');
 var aBtn = oBtn.getElementsByTagName('li');
 var aImg = document.getElementsByTagName('img');
 var timerAuto = null;
 var iNum = ;
 var newTarget = ;
 var w = aImg[].offsetWidth;
 
 function getStyle(obj,attr){
 return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,false)[attr];
 }
 
 function doMove(obj,attr,dir,target,endFn){
        dir=parseInt(getStyle(obj,attr))<target?dir:-dir;
        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
 var speed=parseInt(getStyle(obj,attr))+dir;
 if(speed>target&&dir> || speed<target&&dir<){
                speed=target;
 }
            obj.style[attr]=speed+'px';
 if(speed==target){
                clearInterval(obj.timer);
                endFn&&endFn();
 }
 },);
 }
 
 function changeColor(index){
 for (var i=; i<aBtn.length; i++) {
            aBtn[i].className = '';
 }
        aBtn[index].className = 'active';
 }
 
 function moveAuto(){
        clearInterval(timerAuto);
        timerAuto = setInterval(function(){
 if(iNum!=aLi.length-){
                iNum++;
                doMove(oUl,'left',,-iNum*w);
 }else{
                iNum = ;
                clearInterval(timerAuto);
                doMove(oUl,'left',,-iNum*w,moveAuto);
 }
            changeColor(iNum);
 },);
 }
 
    moveAuto();
 
 for (var i=; i<aSpan.length; i++) {
        aSpan[i].index = i;
        aSpan[i].onclick = function(){
            clearInterval(timerAuto);
 if(this.index == ){
 if(iNum == aLi.length - ){
                    iNum = ;
 
                    doMove(oUl,'left',,-(w*iNum),moveAuto);
 }else{
                    iNum++;
                    doMove(oUl,'left',,-(w*iNum),moveAuto);
 } 
 }else{
 if(iNum == ){
                    iNum = aLi.length - ;
                    doMove(oUl,'left',,-(w*iNum),moveAuto);
 }else{
                    iNum--;
                    doMove(oUl,'left',,-(w*iNum),moveAuto);
 } 
 }
            changeColor(iNum);
 };
 }
 
 for (var i=; i<aBtn.length; i++) {
        aBtn[i].index = i;
        aBtn[i].onmouseover = function(){
            changeColor(this.index);
            clearInterval(timerAuto);
            iNum = this.index;
            doMove(oUl,'left',,-(w*iNum));
 };
        aBtn[i].onmouseout = function(){
            moveAuto();
 };
 }
};
</script>
</head>
<body>
 <div id="wrap">
 <span id="left"><</span>
 <span id="right">></span>
 <ul id="list">
 <li><img src="img/1.jpg"></li>
 <li><img src="img/2.jpg"></li>
 <li><img src="img/3.jpg"></li>
 <li><img src="img/4.jpg"></li>
 <li><img src="img/5.jpg"></li>
 <li><img src="img/6.jpg"></li>
 </ul>
 <ul id="btns">
 <li class="active"></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
</body>

秒客网

【原】运动版的轮播图，有左右按钮和单独分页，原生JS版

运动版的轮播图，有左右按钮和单独分页

相关文章