jquery淡入淡出轮播动画

最新推荐文章于 2022-09-04 23:56:48 发布

小玉酱粉刷墙

最新推荐文章于 2022-09-04 23:56:48 发布

阅读量480

点赞数 2

分类专栏： jQuery javascript 文章标签： jquery 动画淡入淡出

本文链接：https://blog.csdn.net/xiaoyujiangfens/article/details/53179026

版权

javascript 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

jQuery

1 篇文章 0 订阅

订阅专栏

<!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>