js仿flash图片展示控件

最新推荐文章于 2024-04-30 22:06:17 发布

weixin_30765505

最新推荐文章于 2024-04-30 22:06:17 发布

阅读量122

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/chaoming/archive/2013/04/17/3026742.html

版权

仿flash图片展示控件：

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

function startMove(obj, attr, iTarget)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var cur=0;
        
        if(attr=='opacity')
        {
            cur=Math.round(parseFloat(getStyle(obj, attr))*100);
        }
        else
        {
            cur=parseInt(getStyle(obj, attr));
        }
        
        var speed=(iTarget-cur)/6;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);
        
        if(cur==iTarget)
        {
            clearInterval(obj.timer);
        }
        else
        {
            if(attr=='opacity')
            {
                obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                obj.style.opacity=(cur+speed)/100;
                
            //    document.getElementById('txt1').value=obj.style.opacity;
            }
            else
            {
                obj.style[attr]=cur+speed+'px';
            }
        }
    }, 30);
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿FLASH的图片轮换效果</title>
<link rel="stylesheet" type="text/css" href="zns_style.css">
<script src="move.js"></script>
<script>
function getByClass(oParent, 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('playimages');
    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 oUlSmall=oDivSmall.getElementsByTagName('ul')[0];
    var aLiSmall=oDivSmall.getElementsByTagName('li');
    
    var oUlBig=getByClass(oDiv, 'big_pic')[0];
    var aLiBig=oUlBig.getElementsByTagName('li');
    
    var nowZIndex=2;
    
    var now=0;
    
    oUlSmall.style.width=aLiSmall.length*aLiSmall[0].offsetWidth+'px';
    
    //左右按钮
    oBtnPrev.οnmοuseοver=oMarkLeft.οnmοuseοver=function ()
    {
        startMove(oBtnPrev, 'opacity', 100);
    };
    oBtnPrev.onmouseout=oMarkLeft.οnmοuseοut=function ()
    {
        startMove(oBtnPrev, 'opacity', 0);
    };
    oBtnNext.onmouseover=oMarkRight.οnmοuseοver=function ()
    {
        startMove(oBtnNext, 'opacity', 100);
    };
    oBtnNext.onmouseout=oMarkRight.οnmοuseοut=function ()
    {
        startMove(oBtnNext, 'opacity', 0);
    };
    
    //大图切换
    for(var i=0;i<aLiSmall.length;i++)
    {
        aLiSmall[i].index=i;
        aLiSmall[i].onclick=function ()
        {
            if(this.index==now)return;
            
            now=this.index;
            
            tab();
        };
        
        aLiSmall[i].onmouseover=function ()
        {
            startMove(this, 'opacity', 100);
        };
        aLiSmall[i].onmouseout=function ()
        {
            if(this.index!=now)
            {
                startMove(this, 'opacity', 60);
            }
        };
    }
    
    function tab()
    {
        aLiBig[now].style.zIndex=nowZIndex++;
        
        for(var i=0;i<aLiSmall.length;i++)
        {
            startMove(aLiSmall[i], 'opacity', 60);
        }
        
        startMove(aLiSmall[now], 'opacity', 100);
        
        aLiBig[now].style.height=0;
        startMove(aLiBig[now], 'height', 320);
        
        if(now==0)
        {
            startMove(oUlSmall, 'left', 0);
        }
        else if(now==aLiSmall.length-1)
        {
            startMove(oUlSmall, 'left', -(now-2)*aLiSmall[0].offsetWidth);
        }
        else
        {
            startMove(oUlSmall, 'left', -(now-1)*aLiSmall[0].offsetWidth);
        }
    }
    
    oBtnPrev.onclick=function ()
    {
        now--;
        if(now==-1)
        {
            now=aLiSmall.length-1;
        }
        
        tab();
    };
    
    oBtnNext.onclick=function ()
    {
        now++;
        if(now==aLiSmall.length)
        {
            now=0;
        }
        
        tab();
    };
    
    var timer=setInterval(oBtnNext.onclick, 2000);
    
    oDiv.onmouseover=function ()
    {
        clearInterval(timer);
    };
    oDiv.onmouseout=function ()
    {
        timer=setInterval(oBtnNext.onclick, 2000);
    };
};
</script>
</head>

<body>
<div id="playimages" 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="images/1.jpg" /></li>
        <li><img src="images/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
        <li><img src="images/5.jpg" /></li>
        <li><img src="images/6.jpg" /></li>
    </ul>
    <div class="small_pic">
        <ul style="width:390px;">
            <li style="filter: 100; opacity: 1;"><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            <li><img src="images/6.jpg" /></li>
        </ul>
    </div>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/chaoming/archive/2013/04/17/3026742.html

weixin_30765505

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js仿flash图片展示控件

仿flash图片展示控件：function getStyle(obj, name){ if(obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; ...
复制链接

扫一扫