jquery淡入淡出轮播动画

来源：互联网发布：减员增效人员优化心得编辑：程序博客网时间：2024/05/10 04:53

<!DOCTYPE html>

<html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>    /*--公共样式*/        body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,blockquote,pre,form,fieldset,legend,input,button,        textarea,hr,img{margin:0;padding:0;font-size:12px;color:#333;}        li{list-style:none}        fieldset,img{border:0}        a{text-decoration:none}        a:hover{text-decoration:none}        #mainBox{            width:100%;            height:400px;            overflow:hidden;            margin-top:100px;            position:relative;        }        #imgBox>ul>li{            width:100%;            height:400px;            position:absolute;        }        /*这个不是必须，根据自己的图片大小，由于我的图片过大，设margin负值可以去掉不要的边*/        #imgBox ul li>img{            margin-left:-340px;        }        #toLeft{            position:absolute;            left:235px;            top:160px;            height:68px;            width:35px;            border:none;            display:none;            background:url(img/cssSprites.png) no-repeat -626px  -68px;        }        #toLeft:hover{            background:url(img/cssSprites.png) no-repeat -626px  -153px;        }        #toRight{            position:absolute;            top:160px;            height:68px;            width:35px;            border:none;            background:url(img/cssSprites.png) no-repeat -669px  -68px;            right:235px;            display:none;        }        #toRight:hover{            background:url(img/cssSprites.png) no-repeat -669px  -153px;        }        #indexBox{            position:absolute;            z-index:1000;            top:89%;            left:50%;        }        #indexBox>ul>li{            width:10px;            height:10px;            border-radius:100%;            background:#fff;            float:left;            margin-left:10px;            margin-top:10px;        }      #indexBox .showIndex{            background:#E31436;        }    </style></head><body><div id="mainBox">    <div id="imgBox">        <ul>            <li><img src="img/lunbo1.jpg"/></li>            <li><img src="img/lunbo2.jpg"/></li>            <li><img src="img/lunbo3.jpg"/></li>            <li><img src="img/lunbo4.jpg"/></li>        </ul>    </div>    <div id="indexBox">        <ul>            <li></li>            <li></li>            <li></li>            <li></li>        </ul>    </div>    <span id="toLeft"></span>    <span id="toRight"></span></div><script src="js/jquery-1.11.3.js"></script><script>     $("#mainBox").hover(function(){              $("#toLeft,#toRight").show();     },function(){                 $("#toLeft,#toRight").hide();             }     )    $(function(){        var size=$("#imgBox>ul>li").size();        var imgBox=$("#imgBox>ul>li");        var $indexBox=$("#indexBox>ul li");        var i=0;        $("#imgBox>ul li:gt(0)").hide();        $indexBox.eq(0).addClass("showIndex");        $indexBox.on("mouseover",function(){            $(this).addClass("showIndex").siblings().removeClass("showIndex");            var index=$(this).index();            i=index;            imgBox.eq(i).fadeIn(1000).siblings().fadeOut(1000);        });        function indexLight(){            $indexBox.eq(i).addClass("showIndex").siblings().removeClass("showIndex");        };        function goToLeft(){            i--;            if(i==-1){                i=size-1;            }            imgBox.eq(i).fadeIn(1000).siblings().fadeOut(1000);            indexLight();        };        function goToRight(){            i++;            if(i==size){                i=0;            }            imgBox.eq(i).fadeIn(1000).siblings().fadeOut(1000);            indexLight();        };        $("#toLeft").click(function(){            goToLeft();        });        $("#toRight").click(function(){            goToRight();        });        var timer=setInterval(goToRight,3000);        $("#mainBox").hover(function(){            clearInterval(timer);        },function(){            timer=setInterval(goToRight,3000);        })    })</script></body></html>

1 0