谁讲讲这个图片切换效果流程没看懂源代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function () {
var oImg = document.getElementById('img1');
var arr = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg'];
var num = 0;
oImg.onclick = function () {
// num = num + 2;
// num += 2;
num++;
if (num == arr.length) {
num = 0;
}
// alert( arr[num] );
oImg.src = arr[num];
};
};
</script>
</head>
<body>
<img id="img1" src="img/1.jpg" width="400" height="400" />
</body>
</html>
幻灭丶浏览 1442回答 1
1回答
-
刚毅87
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> window.onload = function () { //获取图片 var oImg = document.getElementById('img1'); //将 4个图片的地址 src 放入数组arr 中,从1到4,分别对应下标0-3 var arr = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg']; //记录下标 var num = 0; //点击事件 oImg.onclick = function () { //每点击一次,下标加1 num++; //当 num = 4时,将0赋值为 num, 从头开始 if (num == arr.length) { num = 0; } //将img/1.jpg-img/4.jpg赋值给 img 的 src oImg.src = arr[num]; }; }; </script> </head> <body> <img id="img1" src="img/1.jpg" width="400" height="400" /> </body> </html>
随时随地看视频慕课网APP
Html/CSS
JavaScript