JavaScript的学习之图片的切换

一、寻找素材

二、编写简单的静态html页面

代码示例

效果展示

三、JS功能的实现

JS代码

完整代码

效果展示

一、寻找素材

随便去网上找几张图片素材

二、编写简单的静态html页面

代码示例

<!doctype html>
<html><head><meta charset="utf-8"><title></title></head><body><style>* {margin: 0;padding: 0;}#box {width: 500px;margin: 50px auto;padding: 10px;background-color: greenyellow;/* 设置文本居中 */text-align: center;}</style><script type="text/javascript">// 带年纪按钮切换图片</script><div id="box"><img src="img/1.jpg" alt="猫咪" /><button id="prev">上一张</button><button id="next">下一张</button></div></body></html>

效果展示

三、JS功能的实现

添加JS代码，让它实现图片切换的功能

JS代码

<script type="text/javascript">// 带年纪按钮切换图片window.onload = function() {var prev = document.getElementById('prev');var next = document.getElementById('next');// 要想切换图片就要修改img标签的src属性var imgs = ['img/1.jpg','img/2.jpg','img/3.jpg',];var index = 0;var info = document.getElementById('info');info.innerHTML = '一共'+imgs.length+'张图片，现在第'+(index+1)+'张';prev.onclick = function(){var img = document.getElementsByTagName('img')[0];index--;// 判断索引是否超出图片数范围if(index<0){index = imgs.length-1;};img.src = imgs[index];info.innerHTML = '一共'+imgs.length+'张图片，现在第'+(index+1)+'张';};next.onclick = function(){var img = document.getElementsByTagName('img')[0];index++;if(index>imgs.length-1){index = 0;};img.src = imgs[index];info.innerHTML = '一共'+imgs.length+'张图片，现在第'+(index+1)+'张';};};
</script>

完整代码

<!doctype html>
<html><head><meta charset="utf-8"><title></title></head><body><style>* {margin: 0;padding: 0;}#box {width: 500px;margin: 50px auto;padding: 10px;background-color: greenyellow;/* 设置文本居中 */text-align: center;}#img{width: 400px;height: 350px;}</style>
<script type="text/javascript">// 带年纪按钮切换图片window.onload = function() {var prev = document.getElementById('prev');var next = document.getElementById('next');// 要想切换图片就要修改img标签的src属性var imgs = ['img/1.jpg','img/2.jpg','img/3.jpg',];var index = 0;var info = document.getElementById('info');info.innerHTML = '一共'+imgs.length+'张图片，现在第'+(index+1)+'张';prev.onclick = function(){var img = document.getElementsByTagName('img')[0];index--;// 判断索引是否超出图片数范围if(index<0){index = imgs.length-1;};img.src = imgs[index];info.innerHTML = '一共'+imgs.length+'张图片，现在第'+(index+1)+'张';};next.onclick = function(){var img = document.getElementsByTagName('img')[0];index++;if(index>imgs.length-1){index = 0;};img.src = imgs[index];info.innerHTML = '一共'+imgs.length+'张图片，现在第'+(index+1)+'张';};};
</script><div id="box"><p id="info"></p><img id="img" src="img/1.jpg" alt="猫咪" /><div><button id="prev">上一张</button><button id="next">下一张</button></div></div></body></html>