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


Posted in Javascript onNovember 29, 2016

在前面的文章中,我们讲到了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 + '/' + 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的属性内容读写操作。其中需要注意的是,当我们点击下一张到最后一张图片或者点击上一张到第一张时,需要设置具体的数值变化,不=否则会越界,那么图片、数字和对应的问题就没有内容。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一个可以随意添加多个序列的tag函数
Jul 21 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 Javascript
JS插件plupload.js实现多图上传并显示进度条
Nov 29 #Javascript
文件上传插件SWFUpload的使用指南
Nov 29 #Javascript
jquery结合html实现中英文页面切换
Nov 29 #Javascript
基于Three.js插件制作360度全景图
Nov 29 #Javascript
jquery购物车结算功能实现方法
Oct 29 #Javascript
JavaScript微信定位功能实现方法
Nov 29 #Javascript
jQuery中的select操作详解
Nov 29 #Javascript
You might like
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
PHPAnalysis中文分词类详解
2014/06/13 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
jquery获取一个元素下面相同子元素的个数代码
2014/07/31 Javascript
深入理解JavaScript系列(28):设计模式之工厂模式详解
2015/03/03 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
2016/10/18 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
Vue插件从封装到发布的完整步骤记录
2019/02/28 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
移动端手指操控左右滑动的菜单
2019/09/08 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
python基于phantomjs实现导入图片
2016/05/13 Python
Python标准库sched模块使用指南
2017/07/06 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
Python实现一个带权无回置随机抽选函数的方法
2019/07/24 Python
tensorflow模型转ncnn的操作方式
2020/05/25 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
如何从一个文件档案的尾端新增记录
2016/12/02 面试题
初中生学习生活的自我评价
2013/11/20 职场文书
酒店员工职业生涯规划
2014/02/25 职场文书
中队活动总结
2014/08/27 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
2015新学期家长寄语
2015/02/26 职场文书
学生会主席任命书
2015/09/21 职场文书
Python List remove()实例用法详解
2021/08/02 Python
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
关于python3 opencv 图像二值化的问题(cv2.adaptiveThreshold函数)
2022/04/04 Python
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python