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

网络编程 2024/11/12 佚名

3 2 1

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

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

      第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="/UploadFiles/2021-04-02/1.jpg">

       这个例子很简单，主要就是对数组的简单读写以及对html的属性内容读写操作。其中需要注意的是，当我们点击下一张到最后一张图片或者点击上一张到第一张时，需要设置具体的数值变化，不=否则会越界，那么图片、数字和对应的问题就没有内容。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,图片切换,数组

标签：

js,图片切换,数组

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

狼山资源网 Copyright www.pvsay.com

评论“巧用数组制作图片切换js代码”

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

暂无“巧用数组制作图片切换js代码”评论...

www.pvsay.com 狼山资源网

29,905影音资源

44,626技术资源

11,817软件资源

578,645站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

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

js,图片切换,数组

用headjs来管理和加载js 提高网站加载速度

JS插件plupload.js实现多图上传并显示进度条

评论“巧用数组制作图片切换js代码”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

友情链接