轮播01--淡入淡出

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播图-淡入淡出</title>
<script src="js/move.js"></script>
<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;display: none;position: absolute;top: 0;left: 0;opacity: 0;filter: alpha(opacity=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>
</head>
<body>
<div id="box">
<ul>
<li style="display:block;opacity: 1;filter: alpha(opacity=100)"><img src="images/1.jpg" alt=""/></li>
<li><img src="images/images/2.jpg" alt=""/></li>
<li><img src="images/images/3.jpg" alt=""/></li>
<li><img src="images/images/4.jpg" alt=""/></li>
<li><img src="images/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>
<input type="button" value="按钮" onclick="abc()">
<script>
    var oUl = document.getElementsByTagName('ul')[0];
    var aLiUl = oUl.getElementsByTagName('li'); 
    var oOl = document.getElementsByTagName('ol')[0];
    var aLiOl = oOl.getElementsByTagName('li');

for(var i=0;i<aLiOl.length;i++){
aLiOl[i].index=i;
aLiOl[i].onmouseover=function(){
for(var i=0;i<aLiOl.length;i++){ //循环中套循环 去掉所有样式
aLiOl[i].className='' ;
aLiUl[i].style.display='none';
startMove(aLiUl[i],{opacity:0},function(){
this.style.display='none'
});
}
this.className='active'; // 外面循环 当前的选中的添加样式
aLiUl[this.index].style.display='block';//this.index当前元素的index值，aliUl[this.index]当前的li;
startMove(aLiUl[this.index],{opacity:100});
}
}
</script>

</body>
</html>

 

 

 

// 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];
        }
    }

 

 

 

 

 

 

 

 

 

 

 

posted @ 2019-03-16 14:57  风的方向·  阅读(137)  评论(0)  编辑  收藏  举报