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

时间：2016-07-10 23:23:09 阅读：284 评论：0 收藏：0 [点我收藏+]

标签：

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

这个例子重点在于：

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

<style>
ul,h2,p{
    padding: 0;margin: 0;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: 0;top: 0;
}
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: 50%;
    margin-top: -20px;
    background: white;
    z-index: 1;
}
#left{
    left: 0;
}
#right{
    right: 0;
}
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 = 0;
 var newTarget = 0;
 var w = aImg[0].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>0 || speed<target&&dir<0){
                speed=target;
 }
            obj.style[attr]=speed+‘px‘;
 if(speed==target){
                clearInterval(obj.timer);
                endFn&&endFn();
 }
 },30);
 }
 
 function changeColor(index){
 for (var i=0; i<aBtn.length; i++) {
            aBtn[i].className = ‘‘;
 }
        aBtn[index].className = ‘active‘;
 }
 
 function moveAuto(){
        clearInterval(timerAuto);
        timerAuto = setInterval(function(){
 if(iNum!=aLi.length-1){
                iNum++;
                doMove(oUl,‘left‘,30,-iNum*w);
 }else{
                iNum = 0;
                clearInterval(timerAuto);
                doMove(oUl,‘left‘,150,-iNum*w,moveAuto);
 }
            changeColor(iNum);
 },1500);
 }
 
    moveAuto();
 
 for (var i=0; i<aSpan.length; i++) {
        aSpan[i].index = i;
        aSpan[i].onclick = function(){
            clearInterval(timerAuto);
 if(this.index == 0){
 if(iNum == aLi.length - 1){
                    iNum = 0;
 
                    doMove(oUl,‘left‘,150,-(w*iNum),moveAuto);
 }else{
                    iNum++;
                    doMove(oUl,‘left‘,40,-(w*iNum),moveAuto);
 } 
 }else{
 if(iNum == 0){
                    iNum = aLi.length - 1;
                    doMove(oUl,‘left‘,150,-(w*iNum),moveAuto);
 }else{
                    iNum--;
                    doMove(oUl,‘left‘,40,-(w*iNum),moveAuto);
 } 
 }
            changeColor(iNum);
 };
 }
 
 for (var i=0; i<aBtn.length; i++) {
        aBtn[i].index = i;
        aBtn[i].onmouseover = function(){
            changeColor(this.index);
            clearInterval(timerAuto);
            iNum = this.index;
            doMove(oUl,‘left‘,150,-(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>

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

标签：

原文地址：http://www.cnblogs.com/bluefantasy728/p/5658755.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行