JavaScript实现幻灯片效果

最新推荐文章于 2025-06-03 15:10:05 发布

荡頭

最新推荐文章于 2025-06-03 15:10:05 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/zhoubo5692/article/details/77775207

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现轮播图的方法。通过fadeIn与fadeOut效果切换图片，并利用按钮与圆点进行导航控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS

/*轮播图图片*/
.carousel {width: 100%;margin: auto;position: relative;}
.carousel ul {margin: 0;padding: 0;position: relative;width: 100%;height: 420px;}
.carousel ul li {list-style: none;float: left;position: absolute;top: 0;left: 0;display: none;}

/*向左向右的按钮*/
.left, .right {position: absolute;top: 200px;z-index: 10;width: 60px;height: 60px;font-size: 45px;border: none;background: #000;color: #fff;text-align: center;padding: 0;opacity: 0.1;cursor: pointer;border-radius: 2px;}
.left {left: 100px;}
.right {right: 100px;}
.left:hover, .right:hover {opacity: 1;}

/*圆点*/
.dot {width: 100%;bottom: 0;height: 30px;position: absolute;text-align: center;z-index: 10;}
.dot span {display: inline-block;width: 12px;height: 12px;border-radius: 50px;background: #fff;margin: 0 15px 0 0;cursor: pointer;z-index: 99;}
.dot .active {background: #851218 !important;}

HTML

<div class="carousel">

    <!--左侧按钮-->
    <button class="left"><i class="fa fa-x fa-angle-left"> </i></button>

    <ul id="carousel">
        <!--循环输出-->
        {loop $advs_pc $row}
            <li class="item"><a target="_blank" href="{$row['link']}"><img src="{$row['thumb_pc']}" height="420" alt="{$row['advname']}"></a></li>
        {/loop}
    </ul>

    <!--下方小圆点-->
    <div class="dot">
        {loop $advs_pc $row}
            <span></span>
        {/loop}
    </div>

    <!--右侧按钮-->
    <button class="right"><i class="fa fa-x fa-angle-right"></i></button>
</div>

JavaScript

$(function () {
      $('.dot').children('span').eq(0).addClass('active');//圆点
      $('#carousel img').width($('body').width());
      var items = $('#carousel').children();
      var len = items.length;
      var index = 0;
      var str = 0;
      var dots = $('.dot').children();

      //自动播放函数autoPlay()
      function autoPlay() {
            $(items[index]).fadeIn(1000);

            function play() {
                $(dots).removeClass("active");
                if (index >= 0 & index < len - 1) {
                    $(items[index]).fadeOut(1500);
                    index++;
                    $(items[index]).fadeIn(1500);
                    $(dots[index]).addClass("active");
                } else {
                    $(items[index]).fadeOut(1500);
                    index = 0;
                    $(items[index]).fadeIn(1500);
                    $(dots[index]).addClass("active");
                }
                str = index;
            }
            setInterval(play, 5000);
        }
        autoPlay();

        //点击左侧按钮的函数
        $(".left").click(function () {
            $(dots).removeClass("active");
            if (str == 0) {
                $(items[str]).fadeOut(1500);
                str = len - 1;
                $(items[str]).fadeIn(1500);
                $(dots[str]).addClass("active");
                index = str;

            } else {
                $(items[str]).fadeOut(1500);
                str--;
                $(items[str]).fadeIn(1500);
                $(dots[str]).addClass("active");
                index = str;
            }
        });
        //点击右侧按钮的函数
        $(".right").click(function () {
            $(dots).removeClass("active");
            if (str == len - 1) {
                $(items[str]).fadeOut(1500);
                str = 0;
                $(items[str]).fadeIn(1500);
                $(dots[str]).addClass("active");
                index = str;
            } else {
                $(items[str]).fadeOut(1500);
                str++;
                $(items[str]).fadeIn(1500);
                $(dots[str]).addClass("active");
                index = str;
            }
        })
        //小圆点
        $(".dot span").click(function () {
            var num = $(this).index();
            $(dots).removeClass("active");
            $(dots[num]).addClass("active");
            $(items).fadeOut(1500);
            $(items[num]).fadeIn(1500);
            index = num;
        })
 });

document

主要使用fadeIn与fadeOut实现淡入淡出效果实现轮播