JavaScript实现切换多张图片
本文实例为大家分享了JavaScript实现切换多张图片的具体代码，供大家参考，具体内容如下
循环切换图片
HTML+CSS+JavaScript
html部分
<body> <div class="outer"> <p id="info"></p> <img src="./images/banner1.png" alt="图片" title="图片"> <button id='prev'>上一张</button> <button id='next'>下一张</button> </div> </body>
css部分
<style>
* {
padding: 0;
margin: 0;
}
.outer {
width: 1000px;
background-color: #bfa;
margin: 50px auto;
text-align: center;
padding: 10px;
}
img {
width: 900px;
display: block;
margin: 0 auto;
}
button {
margin: 5px;
}
</style>
JavaScript部分
这里用到了JavaScript的DOM对象
<script>
// 加载文档
window.onload = function () {
//获取img标签
var img = document.getElementsByTagName("img")[0];
//创建一个数组保存所有图片的路径
//这里设置图片文件的路径
var imgArr = ["./images/banner1.png", "./images/banner2.png", "./images/banner3.png", "./images/banner4.png", "./images/banner5.png"];
//设置图片初始值
var index = 0;
//获取id为info的p标签
var info = document.getElementById("info");
info.innerHTML = "一共" + imgArr.length + "张," + "当前为第" + (index + 1) + "张";
//绑定两个按钮
//上一张
document.getElementById("prev").onclick = function () {
index--;
//判断index是否小于0
if (index < 0) {
index = imgArr.length - 1;//循环(第一张-》最后一张)
}
img.src = imgArr[index];
info.innerHTML = "一共" + imgArr.length + "张," + "当前为第" + (index + 1) + "张";
};
//下一张
document.getElementById("next").onclick = function () {
index++;
//判断index是否大于数组的长度-1(数组的最大下标)
if (index > imgArr.length - 1) {
index = 0;//循环(最后一张-》第一张)
}
img.src = imgArr[index];
info.innerHTML = "一共" + imgArr.length + "张," + "当前为第" + (index + 1) + "张";
}
};
</script>
预览效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
简单的实现点击箭头图片切换的js代码
步骤如下: (1) 准备图片(左右箭头,以及一些示例图片) (2) JS(jquery)的代码如下: 复制代码 代码如下: <script type="text/javascript" src="JS/jquery-1.4.4.js"></script> <script type="text/javascript"> var picPath = new Array(); picPath.push("I
-
css图片切换效果代码[不用js]
纯css图切换 练习 教程来自snwebsite a{ display:block; border:1px solid #cccccc; width:20px; height:20px; margin:1px; } dl{ position:absolute; width:240px; height:170px; } dt{ position:absolute; right:1px; top:25px; } dd{ width:240px; height:170px; overflow:hidd
-
纯js实现背景图片切换效果代码
html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>背景切
-
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码. 最后的效果如下: Html代码部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <met
-
js图片自动切换效果处理代码
复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=1000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]="5.jpg"; arr[5
-
一段非常简单的让图片自动切换js代码
复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=1000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]="5.jpg"; arr[5
-
用html+css+js实现的一个简单的图片切换特效
如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码 代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a
-
最简单的js图片切换效果实现代码
无意中在网上发现的,代码非常的简单,一看就明白! 复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]
-
js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
-
JS鼠标滑过图片时切换图片实现思路
在很多网站上我们会发现当鼠标滑过一张图片后,这张图片切换为了另外的一张图片.这里小编说说这是怎么实现的. 在写Javascript代码前我们必须要有实验的HTML代码 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Jquery deal images</t