如何用JS语句显示图片?

JavaScript017

如何用JS语句显示图片?,第1张

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<script>标签,输入js代码:$('body').append('<img src="https://www.baidu.com/img/bd_logo1.png" />')。

3、浏览器运行index.html页面,此时图片被js成功显示到页面上。

我写了一个demo 你可以参考一下

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>silde image demo</title>

<style>

.stage {

        display:flex

margin:100px auto auto auto

width:400px

height:400px

overflow:hidden

}

</style>

<script>

window.addEventListener('load',function(){

// 设置3个图片的地址

var imgSrcs = ['1.jpg','2.jpg','3.jpg']

// 设置滚动间隔时间(毫秒)

var interval = 1000

var viewer = document.getElementById('viewer')

var current = 0

var len = imgSrcs.length

var setImage = function(){

viewer.src = imgSrcs[current]

current = ++current>len-1? 0 : current

}

setImage()

setInterval(setImage,interval)

})

</script>

</head>

<body>

<div class="stage">

<img id="viewer" src="#" alt="">

</div>

</body>

</html>