<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #outer{ width: 500px; margin: 50px auto; padding: 10px; background-color: greenyellow; /*设置文本居中*/ text-align: center; } </style> <script type="text/javascript"> window.onload = function(){ //文档全部加载完成后再加载onload函数 /* * 点击按钮切换图片 */ //获取两个按钮 var prev = document.getElementById("prev"); var next = document.getElementById("next"); /* * 要切换图片就是要修改img标签的src属性 */ //获取img标签,自结束标签返回的是类数组 var img = document.getElementsByTagName("img")[0]; //HtmlImageElement //创建一个数组,用来保存图片的路径 var imgArr = ["img/1.jpg" , "img/2.jpg" , "img/3.jpg" , "img/4.jpg" ,"img/5.jpg"]; //创建一个变量,来保存当前正在显示的图片的索引 var index = 0; //获取id为info的p元素 var info = document.getElementById("info"); //设置提示文字 info.innerHTML = "一共 "+imgArr.length+" 张图片,当前第 "+(index+1)+" 张"; //没有货括号会拼串 //分别为两个按钮绑定单击响应函数 prev.onclick = function(){ /* * 切换到上一张,索引自减 */ index--; //判断index是否小于0 if(index < 0){ index = imgArr.length - 1; } img.src = imgArr[index]; //当点击按钮以后,重新设置信息 info.innerHTML = "一共 "+imgArr.length+" 张图片,当前第 "+(index+1)+" 张"; }; next.onclick = function(){ /* * 切换到下一张是index自增 */ index++; if(index > imgArr.length - 1){ index = 0; } //切换图片就是修改img的src属性 //要修改一个元素的属性 元素.属性 = 属性值 img.src = imgArr[index]; //当点击按钮以后,重新设置信息 info.innerHTML = "一共 "+imgArr.length+" 张图片,当前第 "+(index+1)+" 张"; }; }; </script> </head> <body> <div id="outer"> <p id="info"></p> <img src="img/1.jpg" alt="冰棍" /> <button id="prev">上一张</button> <button id="next">下一张</button> </div> </body> </html>
JS图片轮换
猜你喜欢
转载自www.cnblogs.com/luoxuw/p/11457046.html
今日推荐
周排行