左右运动轮播图

2019-03-17 16:41:16 阅读：264 来源： 互联网

标签：iCur aLiUl 左右 obj 轮播 iSpeed var 运动 attr

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>轮播图-左右轮播运动</title>
<style>
body,ul,ol{margin:0;padding:0;}
li{ list-style:none;}
img{ border:none; vertical-align:top;display: block;width: 100% }
#box{width:470px;height:150px; position:relative; margin:30px auto; overflow:hidden;}
ul{ width:470px; position:absolute;left:0; top:0; z-index:1;}
ul li{width:470px; position:absolute; top:0;}
ol{z-index:2; width:120px; position:absolute;right:10px; bottom:10px;}
ol li{ width:20px;height:20px; float:left;margin:0 2px; display:inline; background:#fff; color:#f60; line-height:20px; text-align:center;}
ol .active{ background:#f60; color:#fff;}
</style>
<script src="js/move.js"></script>
</head>
<body>
<div id="box">
    <ul>
    <li style="display:block"><img src="images/1.jpg" alt=""/></li>
<li><img src="images/2.jpg" alt=""/></li>
<li><img src="images/3.jpg" alt=""/></li>
<li><img src="images/4.jpg" alt=""/></li>
<li><img src="images/5.jpg" alt=""/></li>
</ul>
<ol>
    <li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
<script>
var oBox=document.getElementById("box");
    var oUl = document.getElementsByTagName('ul')[0];
    var aLiUl = oUl.getElementsByTagName('li');
    var oOl = document.getElementsByTagName('ol')[0];
var aLiOl = oOl.getElementsByTagName('li');
var oneWidth=aLiUl[0].offsetWidth;
var iNow=0;
var aBtn=true;//定义一个开关，解决连续触发运动
for(var i=1;i<aLiUl.length;i++){
aLiUl[i].style.left=oneWidth+'px';
};
for(var i=0;i<aLiOl.length;i++){
aLiOl[i].index=i;
aLiOl[i].onmouseover=function(){
if(aBtn){
aBtn=false;
for(var i=0;i<aLiOl.length;i++){
aLiOl[i].className='';

};
if(iNow<this.index){
aLiUl[this.index].style.left=oneWidth+'px';
startMove(aLiUl[iNow],{left:-oneWidth});
}else if(iNow>this.index){
aLiUl[this.index].style.left=-oneWidth+'px';
startMove(aLiUl[iNow],{left:oneWidth});
}
this.className='active';
startMove(aLiUl[this.index],{left:0},function(){
aBtn=true
});
iNow=this.index;
}
}
}
</script>
</body>
</html>
move.js
// JavaScript Document
function startMove(obj,json,endFn){

        clearInterval(obj.timer);

        obj.timer = setInterval(function(){

            var bBtn = true;

            for(var attr in json){

                var iCur = 0;

                if(attr == 'opacity'){
                    if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
                    iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

                    }
                    else{
                        iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
                    }
                }
                else{
                    iCur = parseInt(getStyle(obj,attr)) || 0;
                }

                var iSpeed = (json[attr] - iCur)/8;
            iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                if(iCur!=json[attr]){
                    bBtn = false;
                }

                if(attr == 'opacity'){
                    obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
                    obj.style.opacity = (iCur + iSpeed)/100;

                }
                else{
                    obj.style[attr] = iCur + iSpeed + 'px';
                }


            }

            if(bBtn){
                clearInterval(obj.timer);

                if(endFn){
                    endFn.call(obj);
                }
            }

        },30);

    }


    function getStyle(obj,attr){
        if(obj.currentStyle){
            return obj.currentStyle[attr];
        }
        else{
            return getComputedStyle(obj,false)[attr];
        }
    }

标签：iCur,aLiUl,左右,obj,轮播,iSpeed,var,运动,attr
来源： https://www.cnblogs.com/hilxj/p/10547532.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

左右运动轮播图