JavaScript中的点击切换轮播图（接JavaScrip中的Math对象和数组）

廖老师小课堂开课了

已于 2024-06-07 09:50:31 修改

阅读量380

点赞数 15

分类专栏： JavaSrcipt 文章标签： javascript 前端开发语言

于 2024-06-07 09:34:57 首次发布

本文链接：https://blog.csdn.net/2301_80424716/article/details/139515370

版权

JavaSrcipt 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/demo01.js"></script>
    <style>
        #adv{
            width: 220px;
            height: 220px;
            display: flex;
            justify-content: center;
            align-items: center;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <div id="adv">
        <button id="left" onclick="leftPic()">&lt</botton>
        <img id="img">
        <button id="right" onclick="rightPic()">&gt</button>
    </div>
        <!-- <botton id="left" onclick="leftPic()">&lt</botton>
        <img id="img">
        <button id="right" onclick="rightPic()">&gt</button> -->
    
</body>
</html>

JS代码如下：

var arr = new Array();
arr=["../img/1.jpg",
     "../img/2.jpg",
     "../img/3.jpg",
     "../img/4.jpg",
     "../img/5.jpg"];
var time,index=0;
function showPic(){
    document.getElementById("adv").style.backgroundImage="url("+arr[index]+")";
    if(index<arr.length-1){
        index++;
    }else{
        index=0;
    }
}
function leftPic(){
    document.getElementById("adv").style.backgroundImage="url("+arr[index]+")";
    if(index<arr.length-1){
        index--;
    }else{
        index=0;
    }
}
function rightPic(){
    document.getElementById("adv").style.backgroundImage="url("+arr[index]+")";
    if(index<arr.length-1){
        index++;
    }else{
        index=0;
    }
}
setInterval("showPic()",2000)

最后，实现实现效果如下：

JavaScrip中的单击切换轮播图