JavaScript实现轮播图功能

言曌 2020年10月09日11:41:28 7 2722 views

博主分享免费Java教学视频，B站账号：Java刘哥，长期提供技术问题解决、项目定制：本站商品点此

前几天，有一个朋友给了我一个素材，让我帮忙实现轮播图功能，应该是学校的作业。

需要实现自动播放和手动播放，鼠标悬停等功能。使用原生 JavaScript。

我这里贴一下核心代码

<div class="slide">
    <ul id="slide">
        <li class="">
            <a href=""><img id="slideImg1" class="show" src="images/show.png"></a>
        </li>
        <li class="">
            <a href=""><img id="slideImg2" class="hidden" src="images/show2.png"></a>
        </li>
        <li class="">
            <a href=""><img id="slideImg3" class="hidden" src="images/show3.png"></a>
        </li>
    </ul>
    <a href="javascript:;"><i class="pre" id="pre"></i><!-- <img id=abc src="images/pre.png"> --></a>
    <a href="javascript:;"><i class="next" id="next"></i></a>
</div>


<script>
    // 幻灯片下标，默认显示第一个
    var slideIndex = 1;

    // 查询有多少个幻灯片
    var slideCount = document.getElementById('slide').children.length;

    // 自动播放
    function showSlides() {

        // 大于总数，显示第一个
        if (slideIndex > slideCount) {
            slideIndex = 1;
        }

        // 小于等于1，显示最后一个
        if (slideIndex < 1) {
            slideIndex = slideCount;
        }

        console.log('slideCount:' + slideCount);
        console.log('slideIndex:' + slideIndex);

        // 设置所有的隐藏
        for (var i = 1; i <= slideCount; i++) {
            document.getElementById('slideImg' + i).setAttribute('class', 'hidden');
        }

        // 显示下标为slideIndex的幻灯片
        document.getElementById('slideImg' + slideIndex).setAttribute('class', 'show');
    }

    // 点击上一页按钮
    var pre = document.getElementById('pre');

    function showPre() {
        slideIndex--;
        showSlides();
    }

    pre.onclick = showPre;


    // 点击下一页按钮
    var next = document.getElementById('next');
    function showNext() {
        slideIndex++;
        showSlides();
    }
    next.onclick = showNext;


    // 自动播放 2s 自动播放
    var timer = null;
    function autoPlay() {
        timer = setInterval(function () {
            showNext();
        }, 2000);
    }
    autoPlay();


    // 鼠标放上暂停播放
    var container = document.querySelector(".slide");
    container.onmouseenter = function () {
        clearInterval(timer);
    }
    // 鼠标移开则自动播放
    container.onmouseleave = function () {
        autoPlay();
    }

</script>

效果图是这样的