数组的操作与应用

数组的定义

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. <C++Primer>第四版 阅读笔记 第三部分 “类和数据抽象”

    类定义了数据成员和函数成员:数据成员用于存储与该类类型的对象相关联的状态:而函数成员则负责执行赋予数据意义的操作. 第12章 类 一个类可以包含若干公有的.私有的和受保护的部分:在public部分定义 ...

  2. SysLog简介和java操作实例

    什么是SysLog syslog协议属于一种主从式协议:syslog发送端会传送出一个小的文字讯息(小于1024字节)到syslog接收端.接收端通常名为“syslogd”.“syslog daemo ...

  3. GIS制图课程前言

    一直以来都想写一本关于电子地图制图的工具书,把过去所遇到的关于电子地图制图的种种方法.技巧和问题进行总结和归纳,传播电子地图制图的思路和心得. 从2010年开始,陆陆续续在华南地区开展了多场的电子地图 ...

  4. 写给Java开发者的Node.JS简介

    前言 今天上推特看见这篇文章,点进去发现是新货. 正好最近想入Node的坑,又有一些Java基础,所以希望翻译出来给大家,同时也让自己加深理解. 才疏学浅,如有不妥之处请指正. 原文链接:Node f ...

  5. Python系列之Collections内置模块（2）

    defaultdict 返回一个类 dict 的对象,defaultdict 是内置的 dict 类的子类. 如果访问 dict 未初始化的 key 值时,会抛出 KeyError 异常. s_tup ...

  6. 微信小程序开发之http到https的转化

    小程序从公布到现在已经过去好几个月了,本来从小程序发布出来就准备抱着微信的大腿进行一波小程序开发的,但是由于公司项目小程序暂时不支持,也就只能一直搁浅.过年过来偶然和朋友谈起小程序,觉的工作再忙也得找 ...

  7. mysql常用语法

    创建表 create table <表名>( <字段名>  类型(长度) not null primary key auto_increment, **主键 name char ...

  8. sublime与Emment

    sublime与Emment 作为一个开发者,想必用过sublime和Emment 的无不大快朵颐,这两者结合在一起简直是天合之作.它不仅仅提高编码的速度而且令开发者感到编码的乐趣和舒适感,今天准备写 ...

  9. 细谈sass和less中的变量及其作用域

    博客原文地址:Claiyre的个人博客 https://claiyre.github.io/ 博客园地址:http://www.cnblogs.com/nuannuan7362/ 如需转载,请在文章开 ...

  10. C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC（上）

    译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC(上)),不对的地方欢迎指出与交流. 章节出自<Professional C# ...