自己写的淡入淡出轮播图基本实现(jq)

最新推荐文章于 2021-11-08 14:57:37 发布

aswind7

最新推荐文章于 2021-11-08 14:57:37 发布

阅读量2k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/sqfbeijing/article/details/48524301

版权

jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

上面的代码有bug

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .lunboBlock {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .lunboBlock .imagesBlock ul{
            padding: 0;
            margin: 0;
            position: relative;
            width: 100%;
            height: 400px;
        }
        .lunboBlock .imagesBlock ul li {
            list-style-type: none;
            position: absolute;
            width: 1920px;
            left: 50%;
            margin-left: -960px;
        }
        .lunboBlock .dottedBlock {
            position: absolute;
            bottom: 30px;
            width: 100px;
            left: 50%;
            margin-left: -50px;
            /* background: red; */
        }
        .lunboBlock .dottedBlock ul,.lunboBlock .dottedBlock ul li  {
            list-style-type:  none;
            padding: 0;
            margin: 0;
        }
        .lunboBlock .dottedBlock ul li {
            margin-right: 3px;
            cursor: pointer;
            color: white;
            font-size: 14px;
            text-align: center;
            line-height: 12px;
            width: 10px;
            height: 10px;
            border: 2px solid white;
            border-radius: 50%;
            display: inline-block;
            opacity: 0.4;
        }
        .lunboBlock .dottedBlock ul li.active {
            background: white;
            opacity: 1;
        }


    </style>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
    // 此方法有个缺陷，如果一直点击同一个点，则这张图片变白，再出现，fade 时间由1000变为2000
    // 未解决
    $(function(){
        var current = 0,
        $images_li = $('.lunboBlock .imagesBlock>ul>li'),
        $dotted_li = $('.lunboBlock .dottedBlock>ul>li'),
        length = $images_li.length;
            // 先显示第一张照片
            $images_li.fadeOut(0).eq(current).fadeIn(0);
            // 设置动画组
            function show() {
                if(current < length-1){
                    $images_li.fadeOut(1000);
                    current++;
                    $images_li.eq(current).fadeIn(1000);
                    // 点的显示
                    $dotted_li.removeClass('active').eq(current).addClass('active');
                }
                else {
                    $images_li.fadeOut(1000);
                    current = 0;
                    $images_li.eq(current).fadeIn(1000);
                    // 点的显示
                    $dotted_li.removeClass('active').eq(current).addClass('active');
                }
            }
            actionId = setInterval(show, 2500);
            // 点击事件产生的动画
            $dotted_li.click(function(event) {
                // 停止隔时间动画
                clearInterval(actionId);
                // 清空队列,且当前动画要放完
                $images_li.stop(true,true);
                // 有点瑕疵，不好理解，这里需要减1,才是显示当前点击的索引对应的图片，因为current++
                current = $(this).index()-1;
                // 马上显示动画
                show();
                // 展开隔时间动画
                actionId = setInterval(show, 2500);
            });
            // 鼠标移到点上，停止动画；移出，继续
            // $dotted_li.hover(function() {
            //  clearInterval(actionId);
            // }, function() {
            //  actionId = setInterval(show, 2500);
            // });
});
</script>
</head>
<body>
    <div class="lunboBlock">
        <div class="imagesBlock">
            <ul>
                <li><img src="1.png" alt="首页轮播图"></li>
                <li><img src="2.png" alt="首页轮播图"></li>
                <li><img src="3.png" alt="首页轮播图"></li>
                <li><img src="4.png" alt="首页轮播图"></li>
            </ul>
        </div>
        <div class="dottedBlock">
            <ul>
                <li class="active"></li>
                <li ></li>
                <li ></li>
                <li ></li>
            </ul>
        </div>
    </div>
</body>
</html>

下面的代码通过siblings处理掉bug

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
        .lunboBlock {
            width: 100%;
            overflow: hidden;
            position: relative;
        }
        .lunboBlock .imagesBlock ul{
            padding: 0;
            margin: 0;
            position: relative;
            width: 100%;
            height: 400px;
        }
        .lunboBlock .imagesBlock ul li {
            list-style-type: none;
            position: absolute;
            width: 1920px;
            left: 50%;
            margin-left: -960px;
        }
        .lunboBlock .dottedBlock {
            position: absolute;
            bottom: 30px;
            width: 80px;
            left: 50%;
            margin-left: -40px;
            /* background: red; */
        }
        .lunboBlock .dottedBlock ul,.lunboBlock .dottedBlock ul li  {
            list-style-type:  none;
            padding: 0;
            margin: 0;
        }
        .lunboBlock .dottedBlock ul li {
            margin-right: 3px;
            cursor: pointer;
            color: white;
            font-size: 14px;
            text-align: center;
            line-height: 12px;
            width: 10px;
            height: 10px;
            border: 2px solid white;
            border-radius: 50%;
            display: inline-block;
            opacity: 0.4;
        }
        .lunboBlock .dottedBlock ul li.active {
            background: white;
            opacity: 1;
        }


    </style>
    <script src="jquery-1.8.3.min.js"></script>
    <script>
    // 此方法有个缺陷，如果一直点击同一个点，则这张图片变白，再出现，fade 时间由1000变为2000
    // 未解决
    $(function(){
        var current = 0,
        $images_li = $('.lunboBlock .imagesBlock>ul>li'),
        $dotted_li = $('.lunboBlock .dottedBlock>ul>li'),
        length = $images_li.length;
            // 先显示第一张照片
            $images_li.fadeOut(0).eq(current).fadeIn(0);
            // 设置动画组
            function show() {
                if(current < length-1){
                    current++;
                    $images_li.eq(current).fadeIn(1000).siblings().fadeOut(1000);
                    // 点的显示
                    $dotted_li.removeClass('active').eq(current).addClass('active');
                }
                else {
                    current = 0;
                    $images_li.eq(current).fadeIn(1000).siblings().fadeOut(1000);
                    // 点的显示
                    $dotted_li.removeClass('active').eq(current).addClass('active');
                }
            }
            actionId = setInterval(show, 2500);
            // 点击事件产生的动画
            $dotted_li.click(function(event) {
                // 停止隔时间动画
                clearInterval(actionId);
                // 清空队列,且当前动画要放完
                $images_li.stop(true,true);
                // 有点瑕疵，不好理解，这里需要减1,才是显示当前点击的索引对应的图片，因为current++
                current = $(this).index()-1;
                // 马上显示动画
                show();
                // 展开隔时间动画
                actionId = setInterval(show, 2500);
            });
            // 鼠标移到点上，停止动画；移出，继续
            // $dotted_li.hover(function() {
            //  clearInterval(actionId);
            // }, function() {
            //  actionId = setInterval(show, 2500);
            // });
});
</script>
</head>
<body>
    <div class="lunboBlock">
        <div class="imagesBlock">
            <ul>
                <li><img src="1.png" alt="首页轮播图"></li>
                <li><img src="2.png" alt="首页轮播图"></li>
                <li><img src="3.png" alt="首页轮播图"></li>
                <li><img src="4.png" alt="首页轮播图"></li>
            </ul>
        </div>
        <div class="dottedBlock">
            <ul>
                <li class="active"></li>
                <li ></li>
                <li ></li>
                <li ></li>
            </ul>
        </div>
    </div>
</body>
</html>

aswind7

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自己写的淡入淡出轮播图基本实现(jq)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { padding: 0; margin: 0; } .lunboBlock {
复制链接

扫一扫