js点击实现多图顺序切换和循环切换效果代码
本章节分享一段代码实例，它利用js实现的多图循环效果。
实现顺序循环，当到达最后一张图片以后会给出提示，当使用循环切换方式时候，可以实现循环切换。
下面就给出代码，并且给出详细的介绍，代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
p {
margin: 0;
}
input {
border: none;
outline: none;
margin: 0;
padding: 0;
}
img {
width: 300px;
height: 300px;
}
#loop {
margin-left: 50px;
background: #c80;
width: 60px;
height: 40px;
font-size: 14px;
line-height: 20px;
text-align: center;
}
#order {
margin-left: 50px;
background: #c80;
width: 60px;
height: 40px;
font-size: 14px;
line-height: 20px;
text-align: center;
}
div {
width: 300px;
height: 300px;
position: relative;
}
span {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 20px;
font-size: 14px;
line-height: 20px;
background: #000;
opacity: 0.5;
color: #fff;
text-align: center;
}
div p {
position: absolute;
left: 0;
bottom: 0;
width: 300px;
height: 20px;
font-size: 14px;
line-height: 20px;
text-align: center;
color: #fff;
background: #000;
opacity: 0.5;
}
div input {
position: absolute;
width: 60px;
height: 60px;
top: 100px;
background: pink;
}
#back {
left: 0;
}
#next {
right: 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
//循环切换
var oNext = document.getElementById("next");
var oBack = document.getElementById("back");
var oImg = document.getElementById("img");
var oText = document.getElementById("text");
var oSpan = document.getElementById("span");
var oLoop = document.getElementById("loop");
var Oorder = document.getElementById('order');
var oText1 = document.getElementById("text1");
var aImg = ["demo/js/img/1.jpg", "demo/js/img/2.jpg", "demo/js/img/3.jpg", "demo/js/img/4.jpg"];
var aText = ["图片1", "图片2", "图片3", "图片4"];
var num = 0;
//点击下一张事件
function next() {
num = num + 1; //每次加一
//进行判断，如果num大于最后一张时,图片返回第一张
// 1 2 3 4
if (num > aImg.length - 1) {
num = 0;
}
oImg.src = aImg[num];
oText.innerHTML = aText[num];//图片信息变化，与数组关联
oSpan.innerHTML = (num + 1) + "/" + aImg.length;//数量变化，与数组关联
}
function back() {
num = num - 1;
//进行判断，如果图片小于第一张时,图片返回最后一张
if (num < 0) {
num = aImg.length - 1;
}
oImg.src = aImg[num];
oText.innerHTML = aText[num];//图片信息变化，与数组关联
oSpan.innerHTML = (num + 1) + "/" + aImg.length;//数量变化，与数组关联
}
function next1() {
num = num + 1; //每次加一
//进行判断，如果num大于最后一张时,弹出警告并把图片定在最后一张
// 1 2 3 4
if (num > aImg.length - 1) {
num = aImg.length - 1;
alert("最后一张了");
}
oImg.src = aImg[num];
oText.innerHTML = aText[num];
oSpan.innerHTML = num + 1 + "/" + aImg.length;
}
function back1() {
num = num - 1;
//进行判断，如果图片小于第一张时，弹出警告并把图片定在第一张
if (num < 0) {
num = 0;
alert("已经是第一张了");
}
oImg.src = aImg[num];
oText.innerHTML = aText[num];
oSpan.innerHTML = num + 1 + "/" + aImg.length;
}
oNext.onclick = next;
oBack.onclick = back;
oLoop.onclick = function () {
oText1.innerHTML = "图片可以从第一张到最后一张循环切换";
oNext.onclick = next;
oBack.onclick = back;
}
Oorder.onclick = function () {
oText1.innerHTML = "图片只能从第一张到最后一张顺序切换";
oNext.onclick = next1;
oBack.onclick = back1;
}
}
</script>
</head>
<body>
<input id="loop" type="button" name="" value="循环切换" />
<input id="order" type="button" name="" value="顺序切换" />
<p id="text1">图片可以从第一张到最后一张循环切换</p>
<div>
<input id="back" type="button" name="" value="上一张" />
<input id="next" type="button" name="" value="下一张" />
<img id="img" src="demo/js/img/1.jpg" />
<span id="span">1/4</span>
<p id="text">图片1</p>
</div>
</body>
</html>
上面的代码实现了我们的要求，下面介绍一下它的实现过程。
一.代码注释:
（1）.var oNext = document.getElementById("next")，获取对应id的元素对象。
（2）.var aImg = ["demo/js/img/1.jpg", "demo/js/img/2.jpg", "demo/js/img/3.jpg", "demo/js/img/4.jpg"]，创建一个数组，里面存放的是图片的地址。
（3）.var aText = ["图片1", "图片2", "图片3", "图片4"]，创建一个数组，里面存放的是文本说明。
（4）.var num = 0，声明一个变量并赋值为0，后面会有使用。
（5）.function next() {
num = num + 1;
if (num > aImg.length - 1) {
num = 0;
}
oImg.src = aImg[num];
oText.innerHTML = aText[num];//图片信息变化，与数组关联
oSpan.innerHTML = (num + 1) + "/" + aImg.length;//数量变化，与数组关联
}，作为可以循环的的下一张事件处理函数。
点击以后，num会加1,。
如果num的数目大于aImg.length - 1，因为num是从0开始，也就是超过了图片的最大数目。
那么就将num重置为0，也就是从头再开始一遍。
然后根据索引设置src值，和文本内容。
二.相关阅读:
（1）.innerHTML属性可以参阅innerHTML一章节。
（2）.onclick事件可以参阅javascript click事件一章节。
js点击实现多图顺序切换和循环切换效果代码，这样的场景在实际项目中还是用的比较多的，关于js点击实现多图顺序切换和循环切换效果代码就介绍到这了。
js点击实现多图顺序切换和循环切换效果代码属于前端实例代码，有关更多实例代码大家可以查看。