图片切换(淡入淡出效果)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
        <title>点击表格切换图片 </title>    

    </head>
    <style>
        .td-class{
            width:20px;
            height: 20px;
        }
        td.active {
            background: orange;
        }
        .showImg{
            position: absolute;
            opacity: 0;
        }

    </style>

    <script type="text/javascript">  
        window.onload = function(){
            var tab=document.getElementById("tab");
            var num=1;
            tab.children[0].children[0].children[0].className="td-class active";
            var showImgs=document.getElementsByClassName("showImg");
            tab.addEventListener("click",function(e){
                var e=e||event;
                if(e.target.nodeName=="TD"){
                    for(var i=0;i<4;i++){
                        e.target.parentNode.children[i].className="td-class";
                    }
                    e.target.className="td-class active";
                    var index=e.target.getAttribute("index");
                    num=index;
                    fadeIn(showImgs[index]);
                    for(var i=0;i<4;i++){
                        if(i!=index){
                            fadeOut(showImgs[i]);
                        }
                    }
                }
            })

            //没有操作时,图片的自我变换
            setInterval(function(){
                for(var i=0;i<4;i++){
                    tab.children[0].children[0].children[i].className="td-class";
                }
                tab.children[0].children[0].children[num].className="td-class active";
                fadeIn(showImgs[num]);
                for(var i=0;i<4;i++){
                    if(i!=num){
                        fadeOut(showImgs[i]);
                    }
                }
                num++;
                if(num>=4){num=0;}
            },2000)
            //获取非行内样式
            function getStyle(ele){
                if(ele.currentStyle){
                    return ele.currentStyle;
                }else return getComputedStyle(ele);
            }

            //淡出效果
            function fadeOut(ele,callback){                       //采用回调函数
                var val=Number(getStyle(ele).opacity);
                clearInterval(ele.timer);
                ele.timer=setInterval(function(){
                    val-=0.04;
                    ele.style.opacity=val;
                    if(val<=0){
                        clearInterval(ele.timer);
                        callback?callback():"";
                    }
                },30)
            }

            //淡入效果
            function fadeIn(ele,callback){
                var val=Number(getStyle(ele).opacity);
                ele.timer=setInterval(function(){
                    val+=0.04;
                    ele.style.opacity=val;
                    if(val>=1){
                        clearInterval(ele.timer);
                        callback?callback():"";
                    }
                },30)
            }
        }
    </script>
    <body>
        <table id="tab" border="1">
            <tr>
                <td index=0 class="td-class"></td>
                <td index=1 class="td-class"></td>
                <td index=2 class="td-class"></td>
                <td index=3 class="td-class"></td>
            </tr>
        </table>
        <div style="position: relative;">       
            <img class="showImg first" src="001.jpg" style="width:300px"/>
            <img class="showImg" src="002.jpg" style="width:300px"/>
            <img class="showImg" src="003.jpg" style="width:300px"/>
            <img class="showImg" src="004.jpg" style="width:300px"/>
        </div>
    </body>
</html>
//如有需要，只需将图片路径更换
图片切换(淡入淡出效果)

猜你喜欢
