巧用数组制作图片切换js代码

在前面的文章中,我们讲到了js中数组的具体操作,详见(Js对Array的各种操作总结),这里就不再做详细的讲解。今天主要的目的是如何用数组进行图片的简单左右切换。

本文中的图片切换具体步骤如下: 

第1步:简单的布局并设计基本的显示样式;
       第2步:通过js获取相关元素;
       第3步: 通过数组进行图片url和对应文字描述的存储;
       第4步:初始化:包括图片的初始化,显示图片数字以及对应文字的初始化等;
       第5步:点击按钮切换图片,编写对应的函数,其实就是数组的简单应用。
       接下来先看看效果图,然后进行对应的代码讲解。

巧用数组制作图片切换js代码

实现代码:

<!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 + 'https://www.jb51.net/' + 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> <a href="javascript:;"> < </a> <a href="javascript:;"> > </a> <p>图片正在加载中……</p> <span>数量正在统计中……</span> <img src="https://www.jb51.net/images/1.jpg" alt=""> </div> </body> </html>

这个例子很简单,主要就是对数组的简单读写以及对html的属性内容读写操作。其中需要注意的是,当我们点击下一张到最后一张图片或者点击上一张到第一张时,需要设置具体的数值变化,不=否则会越界,那么图片、数字和对应的问题就没有内容。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwxggx.html