如何通过js点击两张图片来回切换

JavaScript013

如何通过js点击两张图片来回切换,第1张

首先

if (oImg.src="img/1.png")

是赋值而不是判断相等, 判断相等请用==或者===

其次, 你的切换不应当依赖於从元素上读到的src, 而应当用变量维护当前的状态

示例

window.onload = function()

{

var

oImg = document.getElementById('img1'),

Picture = ['img/1.png','img/2.png'],

Index = 0

oImg.onclick = function()

{

++Index

Index < Picture.length || (Index = 0)

oImg.src = Picture[Index]

}

}

这个问题涉及到了两个知识点,一个知识点是利用js操作dom的css属性;另一个知识点是js进行定时操作。

有两种实现方式,一种是用原生js,另一种是用jquery。为了简单,以jquery为例:

<html>

<head>

<script src="./jquery.js"></script>

</head>

<body>

<div id="d1" style="display:none">d1</div>

<div id="d2">d2</div>

<script>

$(function(){

//转换div

function changeDiv(){

if($("#d1").style.display==none){

$("#d1").show()

$("#d2").hide()

}else{

$("#d1").hide()

$("#d2").show()

}

}

//利用setInterval,设置每隔10秒执行changeDiv函数。

window.setInterval("changeDiv()",10000)

})

</script>

</body>

</html>