js应用之实现图片切换效果
数组的操作与应用
数组的定义
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应用之实现图片切换效果的更多相关文章
- js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
- JS实现简单的图片切换效果
使用图片进行点击切换效果 <!doctype html> <html lang="en"> <head> <meta charset=&q ...
- js带缩略图的图片切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js原生带缩略图的图片切换效果
js原生带缩略图的图片切换效果 本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...
- jquery简单的图片切换效果，支持pc端、移动端的banner图片切换开发
详细内容请点击 无意中看见了两年前写的一个图片切换,那会儿刚刚学习网页制作,可以说是我的第一个处女座的jquery图片切换效果.无聊之余对它的宽度稍稍做了一下修改,变成了支持pc端.手机端全屏的ban ...
- jquery带按钮的图片切换效果
<!doctype html> <html> <head> <meta charset="gb2312"> <title> ...
- 极简的js点击组图切换效果
程序员进行前端开发时,时常要用到点击切换组图的动画效果,网上确实有很多此类插件,但是都很麻烦,乌糟糟无数代码,有那个看的时间,自己都能把功能写完了.在这里我提供一段极简的js点击组图切换效果代码,包含 ...
- 精致3D图片切换效果，最适合企业产品展示
这是一个精致的立体图片切换效果,特别适合企业产品展示,可立即用于实际项目中.支持导航和自动播放功能, 基于 CSS3 实现,推荐使用最新的 Chrome,Firefox 和 Safari 浏览器浏览效 ...
- js实现中文简繁切换效果
html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
随机推荐
- Android内存泄露---检测工具篇
内存使用是程序开发无法回避的一个问题.如果我们毫不在意肆意使用,总有一天会为此还账,且痛不欲生...所以应当防患于未然,把内存使用细化到平时的每一行代码中. 内存使用概念较大,本篇先讲对已有app如何 ...
- SQLServer2008开放windows防火墙配置
为了可以通过TCP/IP协议远程访问SQLServer数据库,需要做以下几点: 在SQLServer所运行的服务器上,我们必须找到SQLServer所侦听的端口然后添加到WIndows防火墙的[允许入 ...
- BZOJ 1497: [NOI2006]最大获利（最大权闭合子图）
1497: [NOI2006]最大获利 Time Limit: 5 Sec Memory Limit: 64 MB Description 新的技术正冲击着手机通讯市场,对于各大运营商来说,这既是机 ...
- 在ubuntu linux 中编写一个自己的python脚本
在ubuntu linux 中编写一个自己的简单的bash脚本. 实现功能:终端中输入简单的命令(以pmpy为例(play music python),为了区别之前说的bash脚本添加了py后缀),来 ...
- 启动activity与使用Intent通信机制解析
我们都知道,一个activity启动另一个activity最简单的方式就是使用startActivity方法: public void startActivity (Intent intent) 但是 ...
- 简单的Elf逆向Writeup
ElfCrackMe1 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acrony ...
- IOS控件布局之Masonry布局框架
前言: 回想起2013年做iOS开发的时候,那时候并没有采用手写布局代码的方式,而是采用xib文件来编写,如果使用纯代码方式是基于window的size(320,480)计算出一个相对位置进行布局,那 ...
- arcpy.mapping常用四大件-MapDocument
arcpy.mapping常用四大件-MapDocument by 李远祥 点开arcpy.mapping的帮助,可以看到其有限的几个类,看起来东西不是很多,但却是非常的使用.由于arcpy定位就是粗 ...
- IIS配置步骤，绝对有用，百度上的不全面，是百度的补充
百度教程:http://www.jb51.net/article/29787.htm 参照百度教程,但是配置不成功,关键的地方来了!! 下面的也要配置设置 1. 2. 3.C:\Windows\Sys ...
- 10步完成Abp(.net core)+Vue的Demo？
1.去abp官网生成项目,选择.net core1.x版本 2.Nuget还原包,需装dotnet core1.1等. 3.新增一个entity,并加入到上下文中 4.然后cmd命令行工具切换到项目 ...