[JavaScript知识库] js轮播图实现

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> js轮播图实现 -> 正文阅读

[JavaScript知识库]js轮播图实现

使用js实现轮播图

今天用js写了一下轮播图
简单的方法：修改图片名称为feng1.jpg、feng2.jpg这样的在js中只用改变名称为1、2、3就能切换图片。
实现功能：1自动轮播、2手动轮播，左右切换、3鼠标指针悬停在图片上时停止轮播，鼠标指针移开继续轮播
实现方法：1.切换图片的函数+定时器实现自动轮播、2点击切换图片的函数、3悬停clear定时器，鼠标指针离开创建定时器

效果图

在这里插入图片描述

代码如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图1</title>
    <style>
        .lunbo {
            width: 900px;
            height: 400px;
            margin: 100px auto;
        }

        .lunbo img {
            width: 100%;
            height: 100%;
        }
        .tleft{
            position: absolute;
            top: 230px;
            left: 330px;
            font-size: 80px;
            color: aliceblue;
            cursor: pointer;/*显示小手指样式*/
        }
        .tright{
            position: absolute;
            top: 230px;
            right: 330px;
            font-size: 80px;
            color: aliceblue;
            cursor: pointer;/*显示小手指样式*/
        }
    </style>
</head>

<body>
    <a  class="tleft" onclick="toleft()"><</a>
    <div class="lunbo">
        <img id="lunbo_img" src="img/feng1.jpg" onmouseover="stopimg()" onmouseout="startimg()">
    </div>
    <span class="tright" onclick="toright()">></span>
    <script>
        var index = 1;
        var time=setInterval(lunbo,2000);//定时器
        function lunbo() {//轮播显示
            index++;
            if (index > 3) {
                index = 1;
            }
            var img = document.getElementById("lunbo_img");
            img.src = "img/feng" + index + ".jpg";
        }

        var toleft=function(){//上一页
            clearInterval(time);
            if(index==1){
                index=3
            }
            else{
                index--;
            }
            let img = document.getElementById("lunbo_img");
            img.src="img/feng" + index + ".jpg";
            time=setInterval(lunbo,2000);
        }
        var toright=function(){//下一页
            clearInterval(time);
            if(index==3){
                index=1
            }
            else{
                index++;
            }
            let img = document.getElementById("lunbo_img");
            img.src="img/feng" + index + ".jpg";
            time=setInterval(lunbo,2000);
        }

        var stopimg=function(){//鼠标悬停，图片暂停
            clearInterval(time);
        }

        var startimg=function(){//鼠标离开
            time=setInterval(lunbo,2000);
        }
        //setInterval(lunbo, 200);
    //切记定时器里调用lunbo方法不能加(),setInterval(lunbo,2000);如果加()会执行lunbo（）方法，而导致定时器没用。
    </script>
</body>

</html>