html代码:
<div id="wrap"> <button>顺序</button> <button>循环</button> <div id="box"> <img src="img/1.jpg" alt=""> <p class="title1">1/4</p> <p class="title2">美女1</p> <button class="leftBut"><</button> <button class="rightBut">></button> </div> </div>
css代码:
<style> * { padding: 0; margin: 0; } #wrap { 700px; text-align: center; margin: 0 auto; } #box { 700px; height: 525px; border: 1px solid; position: relative; } #box p { position: absolute; 100%; line-height: 30px; background: rgba(0, 0, 0, .3); color: #fff; } #box .title1 { top: 0; } #box .title2 { bottom: 0; } #box button { position: absolute; 35px; height: 50px; font-size: 30px; top: 50%; margin-top: -25px; background: rgba(0, 0, 0, .3); color: #fff; } #box .leftBut { left: 0; } #box .rightBut { right: 0; } </style>
js代码:
<script> // 自定义数组 //获取元素 var wrap = document.getElementById("wrap"); var btns = wrap.getElementsByTagName("button"); var box = document.getElementById("box"); var aImg = box.getElementsByTagName("img")[0]; var oPs = box.getElementsByTagName("p"); // 自定义标识 // 默认是顺序结构(第一次运行页面) 点击循环就是循环,点击顺序就是顺序 var flag = true; // 表示当前是顺序结构 // 点击顺序或循环 btns[0].onclick = function () { flag = true; } btns[1].onclick = function () { flag = false; } // 将数组中的值取出来赋值给图片的src var imgSrcArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"]; var n = 0; //默认值是0 展示第一张图片 // 给左右按钮绑定事件 btns[3].onclick = function () { // 每次点击让n的值自身加1 n++; // 判断 if (n === 4) { // 判断是顺序还是循环 if (flag) { //顺序 n = 3; alert("已经是最后一张了"); } else { //循环 n = 0; } } // 给图片和描述赋值 aImg.src = imgSrcArr[n]; oPs[0].innerText = (n + 1) + "/4"; oPs[1].innerText = "美女" + (n + 1); } // 给左右按钮绑定事件 btns[2].onclick = function () { // 每次点击让n的值自身加1 n--; // 判断 if (n === -1) { // 判断是顺序还是循环 if (flag) { //顺序 n = 0; alert("已经是第一张了"); } else { //循环 n = 3; } } // 给图片和描述赋值 aImg.src = imgSrcArr[n]; oPs[0].innerText = (n + 1) + "/4"; oPs[1].innerText = "美女" + (n + 1); } </script>
效果图: