纯javascript图片渐变切换

【Javascript】

下载

新闻

文章

在jquery只要写个函数就可实现图片渐变效果。如果纯js实现又是怎样的呢。

图片渐变效果，使用定时器与改变css透明度即可。点击查看演示

<!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>纯javascript图片渐变切换</title>
    <style type="text/css">
    #pic_div{
        width:600px;
        height: 400px;
        position: relative;
        border: 1px solid red;
        overflow: hidden;
    }
    .pic{
        position: absolute;
        top:0;
        z-index: 1;
    }
    .pic img{
        border: 0;width:600px;
        height: 400px;
    }
    #pic_ul{
        margin: 0;padding:0;
        list-style: none;
        position: absolute;
        z-index: 4;
        top:370px;
        left:230px;
    }
    #pic_ul li{
        margin: 0;padding:0;
        list-style: none;
        font: 10px/20px arial;
        background-color: #eeff53;
        color: #333;
        width:20px;height:20px;
        float: left;margin-left: 5px;
        text-align: center;
        cursor: pointer;
        border-radius: 10px;
    }
    #pic_ul .on{
        background-color: red;
        color: #fff;
    }
    </style>
</head>
<body>

<div id="pic_div">
    <div class="pic"><img  src ="http://www.scscms.com/FUploadFile/Image/2010-9/1.jpg" /></div>
    <div class="pic"><img  src ="http://www.scscms.com/FUploadFile/Image/2010-9/2.jpg" /></div>
    <div class="pic"><img  src ="http://www.scscms.com/FUploadFile/Image/2010-9/3.jpg" /></div>
    <div class="pic"><img  src ="http://www.scscms.com/FUploadFile/Image/2010-9/5.jpg" /></div>
    <ul id="pic_ul">
        <li><<</li>
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>>></li>
    </ul>
</div>
<script type="text/javascript">
    var n=0;//播放第几张
    var o=1;//之前播放的编号
    var s= 0,t=4000;//时间间隔
    var setT,setP=null;//定时器
    var pic=document.getElementById("pic_div").getElementsByTagName("div");//图片所在div
    var li=document.getElementById("pic_ul").getElementsByTagName("li");//图片对应li
    function change_pic(a){
        clearInterval(setT);
        if(a<0)a=pic.length-1;
        if(a>=pic.length)a=0;
        for(var l=0;l<li.length;l++){
            li[l].className="";
        }
        for(var i=0;i<pic.length;i++){
            if(a==i){
                pic[i].style.opacity=0;
                pic[i].style.filter="alpha(opacity=0)";
                pic[i].style.zIndex=3;
            }else{
                pic[i].style.opacity=1;
                pic[i].style.filter="alpha(opacity=100)";
                if(i==o){
                    pic[i].style.zIndex=2;
                }else{
                    pic[i].style.zIndex=1;
                }
            }
        }
        li[a+1].className="on";
        s=0;//从0开始
        o=n=a;
        setT=setInterval(function(){
            s++;
            if(s>100){
                o=a;//完成动画后身份转变
                clearInterval(setT);
            }else{
                pic[a].style.opacity=s/100;
                pic[a].style.filter="alpha(opacity="+s+")";
            }
        },20)
    }
    for(var i=0;i<li.length;i++){
        li[i].onclick=(function(a){
            return function(){
                if(a==0){
                    change_pic(n-1);//上一张
                }else if(a==li.length-1){
                    change_pic(n+1);//下一张
                }else{
                    change_pic(a-1);//当前张
                }
            }
        })(i)
    }
    //定时播放控制
    setP=setInterval(function(){ n++;change_pic(n)},t);
    document.getElementById("pic_div").onmouseover=function(){clearInterval(setP)}
    document.getElementById("pic_div").onmouseout=function(){
        setP=setInterval(function(){ n++;change_pic(n)},t);
    }
</script>
</body>
</html>