【详细】手把手教你实现JavaScript轮播图功能

最新推荐文章于 2023-12-04 20:00:00 发布

HL是限量版

最新推荐文章于 2023-12-04 20:00:00 发布

阅读量7.6k

点赞数 33

分类专栏：前端移动开发文章标签：轮播图 js html

本文链接：https://blog.csdn.net/m0_37218227/article/details/113254732

版权

移动开发同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

前端

11 篇文章 3 订阅

订阅专栏

轮播图见下图是移动端，网站上一种非常常见的展示效果，我们在各大app，网站都经常可以看到这种效果。用户可以用手来回选择展示的图片，无点击事件时，控件会依次循环展示图片。

那么本文今天就探究一下如何实现这类效果。

展示效果

技术流程

对于这个功能，作者梳理了一下实现流程
1. 需要有一个图片切换功能

2. 能够自动切换图片

3. 鼠标移动到轮播图上，不进行轮回播放，鼠标移动走进行轮回播放

图片切换函数的实现

function changePic (curIndex) {
       for (var i = 0; i < pic.length; ++i) {
             pic[i].style.display = "none";
             list[i].className = "";
           }
           pic[curIndex].style.display = "block";
           list[curIndex].className = "on";
       }
   };

遍历所有数组中所有图片，然后通过遍历展示切换图片，进而实现效果

自动切换图片

自动切换图片就需要让他能够在一定时间内自动调用切换函数

function autoPlay () {
                if (++index >= pic.length) index = 0;
                changePic(index);
            }

同时为了实现过一段时间切换下一张，需要进行时间限制

timer = setInterval(autoPlay, 5000);

鼠标悬停控制

鼠标划过整个容器时停止自动播放

wrap.onmouseover = function () 
{      
    clearInterval(timer);
}

鼠标离开整个容器时继续播放至下一张，设置轮播间隔为5000毫秒（5s）

wrap.onmouseout = function () 
{
     timer = setInterval(autoPlay, 5000);
}

html文件引入需要轮播的图片

<body>
<div class="wrap" id='wrap'>
    <ul id="pic">
        <li><img src="res/card1.png" alt=""></li>
        <li><img src="res/card2.png" alt=""></li>
        <li><img src="res/card3.png" alt=""></li>
        <li><img src="res/card4.png" alt=""></li>
        <li><img src="res/card5.png" alt=""></li>
    </ul>
    <ol id="list">
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>

css决定轮播图的样式

<style>
        *{margin:0;
            padding:0;
            list-style:none;}
        .wrap{height:170px;
            width:490px;
            margin:60px auto;
            overflow: hidden;
            position: relative;
            margin:100px auto;}
        .wrap ul{position:absolute;}
        .wrap ul li{height:170px;}
        .wrap ol{position:absolute;
            right:5px;
            bottom:10px;}
        .wrap ol li{height:20px; width: 20px;
            background:#ccc;
            border:solid 1px #666;
            margin-left:5px;
            color:#000;
            float:left;
            line-height:1;
            text-align:center;
            cursor:pointer;}
        .wrap ol .on{background:#E97305;
            color:#fff;}
 </style>

完整代码与演示

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图demo</title>
    <style>
        *{margin:0;
            padding:0;
            list-style:none;}
        .wrap{height:170px;
            width:490px;
            margin:60px auto;
            overflow: hidden;
            position: relative;
            margin:100px auto;}
        .wrap ul{position:absolute;}
        .wrap ul li{height:170px;}
        .wrap ol{position:absolute;
            right:5px;
            bottom:10px;}
        .wrap ol li{height:20px; width: 20px;
            background:#ccc;
            border:solid 1px #666;
            margin-left:5px;
            color:#000;
            float:left;
            line-height:1;
            text-align:center;
            cursor:pointer;}
        .wrap ol .on{background:#E97305;
            color:#fff;}

    </style>
    <script type="text/javascript">
        window.onload=function(){
            var wrap=document.getElementById('wrap'),
                pic=document.getElementById('pic').getElementsByTagName("li"),
                list=document.getElementById('list').getElementsByTagName('li'),
                index=0,
                timer=null;

            // 定义并调用自动播放函数
            timer = setInterval(autoPlay, 5000);

            // 鼠标划过整个容器时停止自动播放
            wrap.onmouseover = function () {
                clearInterval(timer);
            }

            // 鼠标离开整个容器时继续播放至下一张
            wrap.onmouseout = function () {
                timer = setInterval(autoPlay, 5000);
            }
            // 遍历所有数字导航实现划过切换至对应的图片
            for (var i = 0; i < list.length; i++) {
                list[i].onmouseover = function () {
                    clearInterval(timer);
                    index = this.innerText - 1;
                    changePic(index);
                };
            };

            function autoPlay () {
                if (++index >= pic.length) index = 0;
                changePic(index);
            }

            // 定义图片切换函数
            function changePic (curIndex) {
                for (var i = 0; i < pic.length; ++i) {
                    pic[i].style.display = "none";
                    list[i].className = "";
                }
                pic[curIndex].style.display = "block";
                list[curIndex].className = "on";
            }

        };

    </script>
</head>
<body>
<div class="wrap" id='wrap'>
    <ul id="pic">
        <li><img src="res/card1.png" alt=""></li>
        <li><img src="res/card2.png" alt=""></li>
        <li><img src="res/card3.png" alt=""></li>
        <li><img src="res/card4.png" alt=""></li>
        <li><img src="res/card5.png" alt=""></li>
    </ul>
    <ol id="list">
        <li class="on">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ol>
</div>
</body>
</html>

喜欢的朋友点赞收藏啦

HL是限量版

关注

33
点赞
踩
145

收藏

觉得还不错? 一键收藏
26
评论
【详细】手把手教你实现JavaScript轮播图功能

轮播图见下图是移动端，网站上一种非常常见的展示效果，我们在各大app，网站都经常可以看到这种效果。用户可以用手来回选择展示的图片，无点击事件时，控件会依次循环展示图片。那么本文今天就探究一下如何实现这类效果。...
复制链接

扫一扫