js怎么实现更换图片?

JavaScript015

js怎么实现更换图片?,第1张

js实现更换图片:

<script language =javascript >

var curIndex=0

//时间间隔 单位毫秒

var timeInterval=5000

var arr=new Array()

arr[0]="1.jpg"

arr[1]="2.jpg"

arr[2]="3.jpg"

arr[3]="4.jpg"

arr[4]="5.jpg"

arr[5]="6.jpg"

arr[6]="7.jpg"

setInterval(changeImg,timeInterval)

function changeImg()

{

var obj=document.getElementById("showpic")

if (curIndex==arr.length-1)

{

curIndex=0

}

else

{

curIndex+=1

}

obj.src="image/"+arr[curIndex]

}

</script>

<img src="image/1.jpg" width="427" height="219" id="showpic" />

先把图片的父元素的css样式,postion设置为relative,然后图片的postion设置为absolute,然后用js来改变的图片的left 和 top数值就可以改变图片的位置了。如果不设置父元素,那就将图片的postion设置为relative,也可以改变位置,JS同样。

下面是个简单的例子,你参考下

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>TEST</title>

<style type="text/css">

        *{margin: 0 padding: 0}

        .wrap { position: relative }

        #pic { position: absolute }

</style>

</head>

<body>

<div class="wrap">

    <img id="pic" src="222.jpg">

</div>

<script type="text/javascript">

    var pic = document.getElementById("pic")

    pic.style.left=50+"px" //这里可以更改图片左边距

    pic.style.top=30+"px"  //这里可以更改图片的上边距

</script>

</body>

</html> <script type="text/javascript">

    var pic = document.getElementById("pic")

    pic.style.left=150+"px"

    pic.style.top=130+"px"

</script>

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

1、首先,打开html编辑器,新建html文件,例如:index.html,填写问题基础代码。

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

3、浏览器运行index.html页面,此时网页上的所有图片都被替换成了指定的图片。