这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要为大家详细介绍了巧用数组制作图片切换 js 实现代码, 具有一定的参考价值,感兴趣的小伙伴们可以参考一下
在前面的文章中,我们讲到了 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="../images/1.jpg" alt="">
- </div>
- </body>
- </html>
这个例子很简单,主要就是对数组的简单读写以及对 html 的属性内容读写操作。其中需要注意的是,当我们点击下一张到最后一张图片或者点击上一张到第一张时,需要设置具体的数值变化,不 = 否则会越界,那么图片、数字和对应的问题就没有内容。
来源: http://www.phperz.com/article/17/0705/330069.html