数组的操作与应用

数组的定义

var 数组名=new Array(); //创建空数组

var 数组名=new Array(size);//创建指定数组长度的数组

var 数组名=new Array(值1；值2；...)//用指定的几个元素创建数组

数组操作常用方法

数组名.length 获取数组的长度

pop()  删除并返回数组的最后一个元素

push()  向数组的末尾添加一个新的数组元素，返回新的数组长度

sort() 对数组元素进行排序

思路：

　　第1步：简单的布局并设计基本的显示样式；

第2步：通过js获取相关元素；

第3步： 通过数组进行图片url和对应文字描述的存储；

第4步：初始化：包括图片的初始化，显示图片数字以及对应文字的初始化等；

第5步：点击按钮切换图片，编写对应的函数，其实就是数组的简单应用。

接下来先看看效果图，然后进行对应的代码讲解。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

    <title></title>

    <style type="text/css">

         .box{

            width: 833px;

            height:500px;

            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:220px;

            text-align: center;

            font-size:25px;

            font-weight: bold;

            line-height: 30px;

            color:#fff;

            text-decoration: none;

            opacity: 0.4;

        }

        .box a:hover{

            opacity:0.8;

        }

        .box #prev{

            left: 10px;

        }

        .box #next{

            right: 10px;

        } 

    </style>

    <script >

        window.onload=function(){

        var oprev=document.getElementById('prev');

        var onext=document.getElementById('next');

        var oimg=document.getElementById('img');

        var arr=new Array();

        arr[0]='image/1.jpg';

        arr[1]='image/2.jpg';

        arr[2]='image/3.jpg';

         var index=0;

         //alert('111');
　　　//鼠标单击事件

        onext.onclick=function(){

            index++;

            oimg.src=arr[index];

             //alert(arr[index]);

            if(index==arr.length-1){

                index=0;

            }

        }

　　　　//鼠标单击事件

        oprev.onclick=function(){

             oimg.src=arr[index];

             index--;

             if (index==-1) {

                index=arr.length-1;

             }

        }

        }

    </script>

</head>

<body>

     <div class="box">

        <a id="prev" href="javascript:;"> < </a>

        <a id="next" href="javascript:;"> > </a>

        <img id="img" src="data:image/1.jpg" alt=""/>

    </div>  

</body>

</html>

 运行效果截图：

js应用之实现图片切换效果的更多相关文章

  1. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  2. JS实现简单的图片切换效果

    使用图片进行点击切换效果 <!doctype html> <html lang="en"> <head> <meta charset=&q ...

  3. js带缩略图的图片切换效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js原生带缩略图的图片切换效果

    js原生带缩略图的图片切换效果 本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...

  5. jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发

    详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...

  6. jquery带按钮的图片切换效果

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  7. 极简的js点击组图切换效果

    程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...

  8. 精致3D图片切换效果，最适合企业产品展示

    这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...

  9. js实现中文简繁切换效果

    html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

随机推荐

  1. JS日期时间加减实现

    首先,上代码 var diffDate = function(date, diff) { return new Date( Date.UTC( date.getUTCFullYear(), date. ...

  2. Nginx反向代理、CORS、JSONP等跨域请求解决方法总结

    由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...

  3. [html5] 学习笔记-响应式布局

    1.响应式布局介绍 响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是每一个终端做一个特定的版本.这个概念是为了兼容移动互联网浏览而诞生的,其目的是为用户提供 ...

  4. We Chall-Training: Encodings I -Writeup

    MarkdownPad Document html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,ab ...

  5. Unity预计算光照的学习(速度优化,LightProb,LPPV)

    1.前言 写这篇文章一方面是因为unity的微博最近出了关于预计算光照相关的翻译文章,另一方面一些美术朋友一直在抱怨烘培速度慢 所以抱着好奇的心态来学习一下unity5的PRGI预计算实时光照 2.基 ...

  6. Uip学习简介及网址

    http://www.ichanging.org/uip-stm32.html http://www.ichanging.org/share/ http://bbs.eeworld.com.cn/th ...

  7. repeater绑定泛型list<string>

    菜鸟D重出江湖,依然是菜鸟,囧!言归正传—— 工作中遇到一个repeater绑定的问题,数据源是一个list<string> 集合,然后在界面上使用<%#Eval()%>绑定. ...

  8. Matlab命令行编译运行HelloWorld

    Matlab安装完成后用记事本写一个文件HelloWorld.m内容如下: function HelloWorld() disp('Hello,World!'); end 保存后在命令行中切到Hell ...

  9. Android 7.0 PopupWindow 的兼容问题

    Android7.0 PopupWindow的兼容问题    Android7.0 中对 PopupWindow 这个常用的控件又做了一些改动,修复了以前遗留的一些问题的同时貌似又引入了一些问题,本文 ...

  10. Javascript定时器中的this指向

    使用js中的定时器(setInterval,setTimeout),很容易会遇到this指向的问题. 直接上例子: var name = 'my name is window'; var obj = ...