js - 02课 - 图片循环顺序切换实例
Posted 黑土白云
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于js - 02课 - 图片循环顺序切换实例的主要内容，如果未能解决你的问题，请参考以下文章
使用javascript实现图片上下切换效果并且实现顺序循环播放