js - 02课 - 图片循环顺序切换实例
思路：
总结：
1. 给循环与否设置标识 isLoop ,true为循环
2. 下一张到最后一张的时候， 循环则 index 变成0 ， 否则停留在最后一张，下标为arrImg.length-1
上一张到第一张的时候， 循环则跑到最后一张， 否则停留在第一张
3.当下标发生变化的时候， 哪些东西要改变？ 图片 ， 图片顶部的文字， 图片下面的文字信息
1. 效果
2. 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p { margin:0; }
body { text-align:center; }
#box { width:400px; height:400px; border:10px solid #ccc; margin:50px auto 0; position:relative; }
a { width:40px; height:40px; background:#fff; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:160px; font-size:18px; color:#000; text-align:center; line-height:40px; text-decoration:none; }
a:hover { filter:alpha(opacity:30); opacity:0.3; }
#prev { left:10px; }
#next { right:10px; }
#p1 { width:400px; height:30px; line-height:30px; text-align:center; background:#000; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8; position:absolute; bottom:0; left:0; }
strong { width:400px; height:30px; line-height:30px; text-align:center; background:#000; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:0; left:0; }
#img1 { width:400px; height:400px; }
span { position:absolute; width:400px; height:30px; line-height:30px; text-align:center; top:-50px; left:0; font-family:'微软雅黑'; }
</style>
</head>
<body>
<input type="button" value="循环播放图片">
<input type="button" value="顺序播放图片">
<div id="box">
<span>图片可从最后一张跳转到第一张循环切换</span>
<a id="prev" href="javascript:;"><</a>
<a id="next" href="javascript:;">></a>
<p id="p1">图片文字加载中...</p>
<strong id="strong1">图片数量计算中...</strong>
<img id="img1">
</div>
<script>
window.onload = function () {
var aBtn = document.getElementsByTagName('input')
var oSpan = document.getElementsByTagName('span')
var oPrev = document.getElementById('prev')
var oNext = document.getElementById('next')
var oP = document.getElementById('p1')
var oStrong = document.getElementById('strong1')
var oImg = document.getElementById('img1')
var arrImg = ['img/1.png','img/2.png','img/3.png','img/4.png',]
var arrText = [ '文字一', '文字二', '文字三', '图片4' ];
var index = 0;
var isLoop = true;
init();
aBtn[0].onclick = function () {
isLoop = true;
oSpan[0].innerHTML = '循环轮播 ：图片可从最后一张跳转到第一张循环切换';
oSpan[0].style.color = 'red';
}
aBtn[1].onclick = function () {
isLoop = false;
oSpan[0].innerHTML = '顺序：图片只能到最后一张\或只能到第一张切换';
oSpan[0].style.color = 'red';
}
oNext.onclick = function () {
index++;
if (index == arrImg.length){
isLoop ? index = 0 : index = arrImg.length-1;
}
init();
}
oPrev.onclick = function () {
index--;
if (index == -1){
isLoop ? index = arrImg.length - 1 : index = 0;
}
init();
}
function init() {
oP.innerHTML = arrText[index];
oImg.src = arrImg[index];
oStrong.innerHTML = (index+1)+ '/' + arrImg.length;
}
}
</script>
</body>
</html>
