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 ...
随机推荐
- 使用 visualstudio code 编辑器调试执行在 homestead 环境中的 laravel 程序
由于之前做 .net 开发比较熟悉 visualstudio,所以自 visualstudio code 发布后就一直在不同场合使用 vscode ,比如前端.node等等.最近在做 laravel ...
- [CSS3] 学习笔记-选择器详解（三）
1.UI元素状态伪类选择器 在CSS3的选择器中,除了结构性伪类选择器外,还有一种UI元素伪类选择器.这些选择器的共同特征是:指定的样式只有当元素处于某种状态时才起作用,在默认状态下不起作用.在CSS ...
- PHP面向对象(OOP)----分页类
> 同验证码类,分页也是在个人博客,论坛等网站中不可缺少的方式,通过分页可以在一个界面展示固定条数的数据,而不至于将所有数据全部罗列到一起,实现分页的原理其实就是对数据库查询输出加了一个limi ...
- 5个步骤创建你的第一个RESTFul 服务
1.啥是RESTFul 服务 在我们创建简单小程序前,先来学习下RESTFul 服务.RESTFul服务就是遵循了 Representational State Transfer(可以参考http:/ ...
- Git合并分支命令：git merge --ff
今天研究了一下git merge命令常用参数,并分别用简单的例子实验了一下,整理如下: 输入git merge -h可以查看相关参数: --ff 快速合并,这个是默认的参数.如果合并过程出现冲突,G ...
- linux文本处理常用指令总结
引子 作为一个偏爱windows的程序员,以前做文本处理的时候总是喜欢在windows下用notepad++等图形化工具处理,比如有时需要把linux服务器上一个文件进行一次全局字符串替换这样简单的操 ...
- SpringMvc拦截器小测试
前言 俗话说做项目是让人成长最快的方案,最近小编写项目的时候遇到了一个小问题.小编在项目中所负责的后台系统,但是后台系统是通过系统的页面是通过ifame联动的,那么这时候问题就来了,后台所做的所有操作 ...
- V3学院XILINX FPGA寒假班培训感受 江苏大学 电子信息科学与技术 邓普建
事先申明一点,我是大一的学生,因此会站在一个新生的角度叙述. 刚开始接触V3学院是在江苏大学与V3学院合办的FPGA/SOC培训中,那是对全校开放的免费培训,历时三个周末.我那时有幸从头听到了尾,觉得 ...
- Angular.js之指令学习笔记
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- 下载安装Cygwin
下载程序 http://www.cygwin.com/ 安装程序 下载完成后,运行setup.exe程序,出现安装画面. 直接点“下一步”,出现安装模式的对话框,如下图所示: 这里可以看到有三种安装模 ...