巧用数组制作图片切换js代码
编程学习 2021-07-04 19:19www.dzhlxh.cn编程入门
这篇文章主要为大家详细介绍了巧用数组制作图片切换js实现代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
在前面的文章中，我们讲到了js中数组的具体操作，详见（），这里就不再做详细的讲解。今天主要的目的是如何用数组进行图片的简单左右切换。
本文中的图片切换具体步骤如下：
第1步：简单的布局并设计基本的显示样式；
第2步：通过js获取相关元素；
第3步： 通过数组进行图片url和对应文字描述的存储；
第4步：初始化：包括图片的初始化，显示图片数字以及对应文字的初始化等；
第5步：点击按钮切换图片，编写对应的函数，其实就是数组的简单应用。
接下来先看看效果图，然后进行对应的代码讲解。
实现代码：
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>图片切换</title> <style> .box{ width: 600px; height:400px; border: 10px solid #ccc; position: relative; margin: 40px auto 0; } .box a{ width: 30px; height: 30px; background-color: #000; border: 5px solid #fff; position: absolute; top:180px; text-align: center; font-size:25px; font-weight: bold; line-height: 30px; color:#fff; text-decoration: none; filter: alpha(opacity:40); opacity: 0.4; } .box a:hover{ filter:alpha(opacity:80); opacity:0.8; } .box #prev{ left: 10px; } .box #next{ right: 10px; } #text,#num{ height: 30px; line-height:30px; width: 600px; color:#fff; position: absolute; left: 0; background-color: #000; text-align: center; filter: alpha(opacity:80); opacity: 0.8; margin:0; } .box #text{ bottom: 0; } .box #num{ top:0; } .box #img1{ width: 600px; height: 400px; } </style> <script> window.onload = function () { var oPrev = document.getElementById("prev"); var oNext = document.getElementById("next"); var oText = document.getElementById("text"); var oNum = document.getElementById("num"); var oImg = document.getElementById("img1"); var arrUrl = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg']; var arrText = ['文字1','文字2','文字3','文字4']; //初始化 var num = 0; function fnTab(){ oNum.innerHTML = num + 1 + '/' + arrText.length; oImg.src = arrUrl[num]; oText.innerHTML = arrText[num]; }; fnTab(); oPrev.onclick = function(){ num --; if( num == -1){ num = arrUrl.length -1; } fnTab(); }; oNext.onclick = function(){ num ++; if(num == arrUrl.length){ num = 0; } fnTab(); }; }; </script> </head> <body> <div class="box"> <a id="prev" href="javascript:;"> < </a> <a id="next" href="javascript:;"> > </a> <p id="text">图片正在加载中……</p> <span id="num">数量正在统计中……</span> <img id="img1" src="../images/1.jpg" alt=""> </div> </body> </html>
这个例子很简单，主要就是对数组的简单读写以及对html的属性内容读写操作。其中需要注意的是，当我们点击下一张到最后一张图片或者点击上一张到第一张时，需要设置具体的数值变化，不=否则会越界，那么图片、数字和对应的问题就没有内容。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。