JavaScript实现轮播图方法二

yjhqukq

已于 2022-05-01 21:17:50 修改

阅读量280

点赞数

分类专栏： JavaScript 文章标签： JavaScript HTML CSS

于 2022-04-21 21:00:00 首次发布

本文链接：https://blog.csdn.net/yjhqukq/article/details/124314119

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScript实现轮播图方法二

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

一个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的感受

细心，耐心

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

还得有点恒心

yjhqukq

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现轮播图方法二

JavaScript实现轮播图方法二一个img标签，一个函数，一个定时器完成轮播图效果展示主要代码HTMLCSSJavaScript玩JavaScript的感受一个img标签，一个函数，一个定时器完成轮播图效果展示主要代码HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>turnPhoto2</title>
复制链接

扫一扫