一个img标签，一个函数，一个定时器完成轮播图

效果展示

JavaScript实现轮播图方法二，通过一个img标签，一个函数，一个定时器完成

主要代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>turnPhoto2</title>
    <link rel="stylesheet" href="css/turnPhoto2.css">
</head>
<body>
<img src="image/8.jpg" id="photo">
<script src="js/turnPhoto2.js"></script>
</body>
</html>

CSS

body
{
    padding: 0;
    margin:0;
    background-color: #C7EDCC;
}
#photo
{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0px;
    left:0px;
}

JavaScript


let Maximum = 8;
let index = 1;
let photo =window.document.getElementById("photo");

function turn() {
    if (index > Maximum) {
        index = 1;
    }
    // ----------------------------------------------------------------设置img的src属性，两种写法任选
    // photo.src = "image/" + index + ".jpg";
    photo.setAttribute("src","image/"+index+".jpg");
    // ----------------------------------------------------------------
    index++;
}

setInterval(turn, 2000);

玩JavaScript的感受

细心，耐心

习惯培养起来还真地有点寸！

JavaScript实现轮播图方法二

一个img标签，一个函数，一个定时器完成轮播图

效果展示

主要代码

HTML

CSS

JavaScript

玩JavaScript的感受

细心，耐心

还得有点恒心