巧用数组制作图片切换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 相关文章推荐
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
js点击button按钮跳转到另一个新页面
Oct 10 Javascript
vue.js前后端数据交互之提交数据操作详解
Apr 24 Javascript
微信小程序获取音频时长与实时获取播放进度问题
Aug 28 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 Javascript
vue动态绘制四分之三圆环图效果
Sep 03 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
Nov 09 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 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
关于UEditor编辑器远程图片上传失败的解决办法
2012/08/31 PHP
php代码中使用换行及(\n或\r\n和br)的应用
2013/02/02 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
php中return的用法实例分析
2015/02/28 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
PHP中each与list用法分析
2016/01/08 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
Vue实现底部侧边工具栏的实例代码
2018/09/03 Javascript
vue-cli 3.0 版本与3.0以下版本在搭建项目时的区别详解
2018/12/11 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
在react-antd中弹出层form内容传递给父组件的操作
2020/10/24 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
详解python多线程之间的同步(一)
2019/04/03 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
Pycharm中出现ImportError:DLL load failed:找不到指定模块的解决方法
2019/09/17 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
聊聊python中的异常嵌套
2020/09/01 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
委托公证书
2014/04/08 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
德劲DE1105机评
2022/04/05 无线电
python在package下继续嵌套一个package
2022/04/14 Python
Redis特殊数据类型bitmap位图
2022/06/01 Redis
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python