phpstudy集成环境

 首页 > aLiBig[this.index].style.height=0;没效果？

aLiBig[this.index].style.height=0;没效果？

<html>
<head>

<title>仿flash轮播图</title>
<meta charset="utf-8"/>
<style>
    body { background: #666; } ul { padding: 0; margin: 0; } li { list-style: none; } img { border: 0; }
    
    .play{width:400px;height:430px;margin:50 auto;background:#999;font:12px Arial;}
    
    .big_pic{width:400;height:320px;overflow:hidden;background:#ccc;border-bottom:1px solid #222;position:relative;}
    
    .big_pic li{width:400;height:320px;overflow:hiden;background:url(img/loading.gif) no-repeat center center;position:absolute;top:0;left:0;z-index:0;}
    
    .mark_left{width:200px;height:320px;background:red;top:0;left:0;position:absolute;z-index:3000;filter:alpha(opacity:0);opacity:0;}
    
    .mark_right{width:200px;height:320px;background:green;top:0;left:200px;position:absolute;z-index:3000;filter:alpha(opacity:0);
    opacity:0}
    
    .big_pic .prev{width:60px;height:60px;position:absolute;top:130px;left:10px;z-index:3001;background:url(img/btn.gif) no-repeat;filter:alpha(opacity:0);opacity:0;cursor: pointer;}
    
    .big_pic .next{width:60px;height:60px;position:absolute;top:130px;right:10px;z-index:3001;background:url(img/btn.gif) no-repeat 0 -60px;filter:alpha(opacity:0);opacity:0;cursor: pointer;}
    
    .text{position:absolute;bottom:10px;left:10px;z-index:3000;color:#ccc;}
    
    .length{position:absolute;bottom:10px;right:10px;z-index:3000;color:#ccc;}
    
    .bg{width:400px;height:25px;position:absolute;background:#000;bottom:0;left:0;z-index:2999;filter:alpha(opacity:30);opacity:0.3;}
    
    .small_pic{width:380px;height:94px;position:relative;left:10px;top:7px;overflow:hidden;}
    
    .small_pic ul{height:94px;left:0;top:0;position:absolute;}
    
    .small_pic li{width:120px;height:94px;float:left;padding-right:10px;background:url(img/loading.gif) no-repeat center center;cursor: pointer; filter: alpha(opacity:30); opacity: 0.3;}
    
    .small_pic img { width: 120px; height: 94px; }
</style>
<script>
    function getStyle(obj,attr)
    {
        if(obj.currentStyle)
        {
            return obj.currentStyle[attr];
        }
        else
        {
            return getComputedStyle(obj,false)[attr];
        }
    }
    
    //完美运动框架
    function startMove(obj,json,fn)
    {
        clearInterval(obj.timer);

        obj.timer=setInterval(function()
        {
            var bStop=true;
            for(var attr in json)
            {
                //1.取当前的值
                var cur=0;
                if(attr=='opacity')
                {
                    cur=Math.round(parseFloat(getStyle(obj,attr))*100);
                }
                else
                {
                    cur=parseInt(getStyle(obj,attr));
                }
                
                //2.算速度
                var speed=(json[attr]-cur)/8;
                speed=speed>0?Math.ceil(speed):Math.floor(speed);
                
                //3.检测停止
                if(cur!=json[attr])
                {
                    bStop=false;
                }
                if(attr=='opacity')
                {
                    obj.style.filter="alpha(opacity:'+(cur+speed)+')";
                    obj.style.opacity=(cur+speed)/100;
                }
                else
                {
                    obj.style[attr]=cur+speed+'px';
                }
                
            }
            //判断，当所有的值都已经到了，关闭定时器
            if(bStop)
            {
                clearInterval(obj.timer);
                if(fn)
                {
                    return    fn();
                }
            }
            
        },30)
    }
    
    function  getByClass(oParent,sClass){             //从oParent里选出class为sClass的元素；
        var aEle=oParent.getElementsByTagName("*");
        var aResult=[];
        for(var i=0;i<aEle.length;i++){
            if(aEle[i].className==sClass){
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    }
    
    window.onload=function(){
        var oDiv=document.getElementById("playimage");
        var oBtnPrev=getByClass(oDiv,'prev')[0];
        var oBtnNext=getByClass(oDiv,'next')[0];
        var oMarkLeft=getByClass(oDiv,'mark_left')[0];
        var oMarkRight=getByClass(oDiv,'mark_right')[0];
        var oDivSmall=getByClass(oDiv,'small_pic')[0];
        var aLiSmall=oDivSmall.getElementsByTagName("li");
        var oUlBig=getByClass(oDiv,'big_pic')[0];
        var aLiBig=oUlBig.getElementsByTagName("li");
        var nowZIndex=2;
        var now=0;
        
        //左右按钮
        oBtnPrev.onmouseover=oMarkLeft.onmouseover=function(){
            startMove(oBtnPrev,{opacity:100});
        }
        oBtnPrev.onmouseover=oMarkLeft.onmouseout=function(){
            startMove(oBtnPrev,{opacity:0});
        }
        oBtnNext.onmouseover=oMarkRight.onmouseover=function(){
            startMove(oBtnNext,{opacity:100});
        }
        oBtnNext.onmouseout=oMarkRight.onmouseout=function(){
            startMove(oBtnNext,{opacity:0});
        }
        
        //大图切换
        for(var i=0;i<aLiSmall.length;i++){
            
            aLiSmall[i].index=i;
            aLiSmall[i].onclick=function(){
                aLiBig[this.index].style.zIndex=nowZIndex++;
                aLiBig[this.index].style.height=0;
                startMove(aLiBig[this.index],{height:320});

            };
        }
    };
</script>

</head>
<body>

<div id="playimage" class="play">
    <ul class="big_pic">
        <!--按钮-->
        <div class="prev"></div>
        <div class="next"></div>
    
        <div class="text">加载图片说明……</div>
        <div class="length">计算图片数量……</div>
    
        <a class="mark_left" href="javascript:;"></a>
        <a class="mark_right" href="javascript:;"></a>
        <div class="bg"></div>
    
        <li style="z-index:1"><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>
    <div class="small_pic">
        <ul style="width:390px;">
            <li style="filter:alpha(opacity:100);opacity:1;"><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>
    </div>
</div>

</body>
</html>

题主，恭喜你创造了一个闭合经典应用场景。

  1. 把 for 循环改为 forEach 解决

  2. 使用闭包

for(var i=0;i<aLiSmall.length;i++){

    (function(i){
        aLiSmall[i].index=i;
        aLiSmall[i].onclick=function(){
            aLiBig[this.index].style.zIndex=nowZIndex++;
            aLiBig[this.index].style.height=0;
            startMove(aLiBig[this.index],{height:320});
    
        };
    
    })(i);
    
}
【热门文章】
【热门文章】