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 ...
随机推荐
- Hadoop学习笔记-008-CentOS_6.5_64_yum安装mysql
******************************卸载mysql***************************** 第一步,查看centos上是否已经安装了mysql数据库 # rp ...
- Div.2 C. Dasha and Password
C. Dasha and Password time limit per test 2 seconds memory limit per test 256 megabytes input standa ...
- 时间处理之strtotime
strtotime (PHP 4, PHP 5, PHP 7)strtotime - 将任何英文文本的日期时间描述解析为 Unix 时间戳说明 int strtotime ( string $time ...
- Applovin Interview (面经)
职位:SDE Intern positon 地点: San Jose 轮电面:self introduction what's your interest Concept of "Concu ...
- TCP/IP协议族(三) 数字签名与HTTPS详解
前面几篇博客聊了HTTP的相关东西,今天就来聊一聊HTTPS的东西.因为HTTP协议本身存在着明文传输.不能很好的验证通信方的身份和无法验证报文的完整性等一些安全方面的确点,所以才有了HTTPS的缺陷 ...
- 复制vmware虚拟机后，eth0无法显示问题
1. rm /etc/udev/rules.d/70-persistent-net.rules 2. 删除 /etc/sysconfig/network-scripts/ifcfg-eth0下的UUI ...
- javascript学习-对象与原型
javascript学习-对象与原型 Javascript语言是符合面向对象思想的.一般来说,面向对象思想需要满足以下三个基本要求: 封装,Javascript的对象可以自由的扩充成员变量和方法,自然 ...
- 转：微信生成二维码java
package com.wepayweb.weixin.util.device; /*** * V型知识库 www.vxzsk.com */ import java.io.BufferedReader ...
- [solr] - solr5.2.1环境搭建 - 使用solr自带的jetty服务器
solr除了使用tomcat作为容器外,还可以使用其他的常用容器,比如jetty,jboos等,而且solr自身就自带jetty服务器,那么现在就solr自带的jetty服务器进行安装操作.由于sol ...
- API模板
#include <windows.h> #include <windowsx.h> #define DIVISIONS 5 LRESULT CALLBACK WndProc ...