实例:控制div显示_滚动的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS实例_控制div显示_滚动的图片</title>
<script type="text/javascript">
var i = 1;
window.onload = init;
function init() {
window.setInterval("around()", 2000);//定时器
}
function around() {
var imgbar = document.getElementById("imgbar");//获取img的ID对象
imgbar.src = "images/td" + i + ".jpg";
i++;
if (i > 6) {
i = 1;
}
}
</script>
<script type="text/javascript">
function contrl(object) {/* 执行控制的函数 */
var imgbar = document.getElementById("imgbar");//获取要控制的对象
var contrl = document.getElementById("contrl");
var imgbardiv = document.getElementById("imgbardiv");
if (imgbardiv.style.display == "block") {//图片栏div的显示情况控制
imgbardiv.style.display = "none";
contrl.src = "images/th1.jpg";
} else {
imgbardiv.style.display = "block";
contrl.src = "images/th11.jpg";
}
}
</script>
</head>
<body>
<div>
<div><img id=contrl οnclick="contrl(this)" src="images/th11.jpg" /></div>
<div id=imgbardiv>
<img id=imgbar src="images/td1.jpg" />
</div>
</div>
</body>
</html>
显示效果如下: