基于jQuery淡入淡出,鼠标移入停止效果

最新推荐文章于 2022-07-22 10:25:29 发布

了义

最新推荐文章于 2022-07-22 10:25:29 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签： jquery 图片淡入淡出轮播

本文链接：https://blog.csdn.net/shijue98/article/details/53129129

版权

javascript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

图片淡入淡出,轮播切换,鼠标移入停止,移出继续开始效果;
有时候我们需要进行图片展示(例如广告),图片多的情况下,需要循环播放,但是又不希望出现轮播图的效果.
这时候就用到了淡入淡出的效果;
代码比较简单,就不解释了…

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出</title>
    <script src="jquery/jquery-1.11.2.min.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        .box{border: 2px solid red;width: 648px;height: 300px;overflow: hidden;position: relative;}
        li{position: absolute;}
        li,li img{width:100%;height: 100%;}
    </style>
</head>
<body>
    <div class="box">
        <ul id="ul">
            <li><img src="img/1.jpg"/></li>
            <li><img src="img/2.jpg"/></li>
            <li><img src="img/3.jpg"/></li>
            <li><img src="img/4.jpg"/></li>
            <li><img src="img/emma1-100×100.jpg"/></li>
        </ul>
    </div>
    <script>
        var flag=true;
        setInterval(function () {
            if(flag){
                $("li:last").animate({
                    opacity: 0
                }, 1000,function () {
                    $(this).css("opacity","1").prependTo("#ul");
                } );
            }
       },2000);
        $("#ul").hover(function () {
            flag=false;
        },function () {
            flag=true;
        })
    </script>
</body>
</html>