Jq实现淡入淡出轮播图效果

最新推荐文章于 2024-04-19 18:24:22 发布

两岁CV攻城狮

最新推荐文章于 2024-04-19 18:24:22 发布

阅读量506

点赞数

文章标签： javascript jquery

本文链接：https://blog.csdn.net/qq_43581857/article/details/110957888

版权

如题所述，直接上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    /* 盒子  */
    .box {
        position: relative;
    }

    /* banner图 */
    .box,
    .banner {
        width: 1000px;
        height: 500px;
        margin: 50px auto;
    }

    .box .banner {
        position: relative;
        list-style: none;
    }

    .banner li {
        display: none;
    }

    .box ul li img {
        position: absolute;
    }

    .banner .b1 {
        display: block;
    }

    span {
        background: rgb(0, 0, 0, 0.5);
        width: 40px;
        height: 50px;
        display: block;
        position: absolute;
        left: 0px;
        top: 50%;
        z-index: 3;
        line-height: 50px;
        text-align: center;
        cursor: pointer;
        font-family: "宋体";
        font-size: 20px;
        color: white;
    }

    .right {
        left: auto;
        right: 0px;
    }

    .bottom {
        position: absolute;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        list-style: none;
    }

    .bottom li {

        width: 10px;
        height: 10px;
        background: rgb(255, 255, 255);
        float: left;
        border-radius: 50%;
        margin: 0px 5px;
        /* 重影 */
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        cursor: pointer;
    }

    .bottom .on {
        background: rgb(255, 153, 0);
    }
</style>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

<body>
    <div class="box">
        <!-- 轮播图 -->
        <ul class="banner">
            <li class="b1">
                <img src="../img/timg.jpg" alt="">
            </li>
            <li>
                <img src="../img/timg1.jpg" alt="">
            </li>
            <li>
                <img src="../img/timg2.jpg" alt="">
            </li>
            <li>
                <img src="../img/timg3.jpg" alt="">
            </li>
            <li>
                <img src="../img/timg4.jpg" alt="">
            </li>
        </ul>
        <!-- 左右切换 -->
        <span class="left">
            < </span> <span class="right">&gt;
        </span>
        <!-- 底部按钮 -->
        <ol class="bottom">
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
    </div>
</body>
<script>
    var $box = $(".box");
    var $bli = $(".box ul li");
    var $bleft = $(".box .left");
    var $bright = $(".box .right");
    var $dot = $(".box .bottom li");
    var timer = null;
    var num = 0;
    // 因为几行代码一样 所以进行代码封装
    function play() {
        num = num % $bli.length;
        $bli.eq(num).stop().fadeIn(800).siblings().fadeOut(800);
        $dot.eq(num).addClass("on").siblings().removeClass("on");
    }

    function autoplay() {
        timer = setInterval(function () {
            num++;
            play();
        }, 2000);
    };
    autoplay();
    // 当鼠标放上去的时候 计时器停止   移除的时候计时器工作
    //  $box.hover(function() {
    //     clearInterval(timer);        
    //  },function() {
    //      autoplay();    
    //  });
    // 下面是同样的效果 另一种写法
    $box.mouseover(function () {
        clearInterval(timer);
    });
    $box.mouseout(function () {
        autoplay();
    });
    $bleft.click(function () {
        num--;
        play();
    });
    $bright.click(function () {
        num++;
        play();
    });
    $dot.click(function (event) {
        var index = $(this).index();
        num = index;
        $bli.eq(num).stop().fadeIn(800).siblings().fadeOut(800);
        $dot.eq(num).addClass("on").siblings().removeClass();
    });
</script>

</html>

其实淡入淡出轮播图的核心思想就是获取到当前的索引，根据索引找出图片的索引然后更改索引达到一个图片显示其他图片消失然后轮流交替进行的。最主要的核心思想在上面sibinling（）中通过这个方法让当前元素进行淡入操作但是让其他元素进行淡出操作所以效果上就形成了，一张张图盘轮流出来的效果。

两岁CV攻城狮

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
Jq实现淡入淡出轮播图效果

如题所述，直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style>
复制链接

扫一扫