轮播02--上下滚动

<!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; }
#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;height: 270px }
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 oneHeight = aLiUl[0].offsetHeight;
var iNow=0;
var timer=null;
    for(var i=0;i<aLiOl.length;i++){
console.log(oneHeight);
        aLiOl[i].index = i;
        aLiOl[i].onmouseover = function(){
            for(var i=0;i<aLiOl.length;i++){
                aLiOl[i].className = '';
            }
this.className = 'active';
iNow = this.index;
startMove(oUl,{top:-this.index*oneHeight})
        };
};
timer=setInterval(run,2000);
oBox.onmouseover=function(){
clearInterval(timer)
};
oBox.onmouseout=function(){
timer=setInterval(run,2000);
};
function run(){
if(iNow == aLiOl.length-1){
iNow=0
}else{
iNow++;
}
for(var i=0;i<aLiOl.length;i++){
aLiOl[i].className = '';
}
aLiOl[iNow].className = 'active';
console.log(iNow);
startMove(oUl,{top:-iNow*oneHeight});
}
</script>
</body>
</html>
posted @ 2019-03-16 14:58  风的方向·  阅读(194)  评论(0)  编辑  收藏  举报