2张图片点击切换
方法一：改变路径
<img src = 'images/1.jpg' id='img' alt='#' width='100' height='100'>
<script>
var oImg = document.getElementById( 'img' );
var bool = true; //作用是为了去判断第几张图片
oImg.onclick = function (){
oImg.src = 'images/2.jpg';
boolo = false;
} else {
oImg.src = 'images/1.jpg';
bool = true;
}
</script>
注意：如果要定义一个判断变量要用true和false,效率最快；
如果用其他的还要转化成布尔值再来判断；
写成三目：
oImg.src = 'images/' + (bool?'2':'1') + '.jpg';
bool = !bool;
注：改变路径是最不推荐的写法，因为src瞬间改变的时候图片是需要加载时间，要是网速不好，可能会出现空档期；
方法二、利用类名来判断：
<style type="text/css" id= 'hh'>
*{margin: 0;padding: 0;}
#box{
width: 120px;
height: 120px;
}
.box1{
background:url(images/1.jpg) no-repeat center/cover;
}
.box2{
background:url( 'images/2.jpg' ) no-repeat center/cover;
}
</style>
</head>
<body>
<div id='box' class="box1"> </div>
<script type="text/javascript">
var oBox = document.getElementById( 'box' ),
bool = true;
oBox.onclick = function () {
this.className = bool?'box2':'box1';
bool = ! bool;
}
</script>
上面的简写法：直接用布尔值做类名：
<style type="text/css" id= 'hh'>
*{margin: 0;padding: 0;}
#box{
width: 120px;
height: 120px;
}
.true{
background:url(images/1.jpg) no-repeat center/cover;
}
.false{
background:url( 'images/2.jpg' ) no-repeat center/cover;
}
</style>
</head>
<body>
<div id='box' class="false"> </div>
<script type="text/javascript">
var oBox = document.getElementById( 'box' ),
bool = true;
oBox.onclick = function () {
this.className = bool + ''; // bool + ''使bool变成字符串'true' 'false'
bool = ! bool;
}
</script>
方法很多 如 利用display: none block 透明度 等等
