<html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> #controls { width:400px; margin: auto; text-align: center; } #container { width: 400px; height:400px; border: 10px solid #eee; position: relative; background: gray; margin: 10px auto 0; } #prev, #next { position: absolute; background: black; filter:alpha(opacity:40); opacity: 0.4; font-size: 20px; color: white; width: 40px; height: 40px; border: 2px solid white; line-height: 40px; text-align: center; top: 180px; pointer: cursor; text-decoration: none; } #prev:hover, #next:hover { filter:alpha(opacity:80); opacity: 0.8; } #order, #info { position: absolute; width:100%; height: 30px; line-height: 30px; text-align: center; background: black; filter:alpha(opacity:60); opacity: 0.6; font-size: 20px; color: white; } #prev { left: 0; } #next { right: 0; } #picture { height: 400px; width: 400px; } #order { top: 0; } #info { bottom: 0; } </style> <script> window.onload = function(){ //获取网页信息 var oRound = document.getElementById('round'), oSingle = document.getElementById('single'), oPrev = document.getElementById('prev'), oNext = document.getElementById('next'), oOrder = document.getElementById('order'), oInfo = document.getElementById('info'), oPicture = document.getElementById('picture'), arrPic = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"],// arrInfo = ["baby", "me", "sister", "dad"],// interval=3000, timer, i = 0; function changeTab() { oOrder.innerHTML = i + 1 + ' / ' + arrPic.length; oInfo.innerHTML = arrInfo[i]; oPicture.src = arrPic[i]; } changeTab();//初始化轮番图片 // 向后翻页 oNext.onclick = function(){ i++; if(i>3) { i = 0; } changeTab(); } // 向前翻页 oPrev.onclick = function(){ i--; if(i<0) { i = 3; } changeTab(); } // 自动轮番 function play() { timer = setTimeout(function () { oNext.onclick(); play(); }, interval); } play(); } </script> </head> <body> <div id="controls"> <input id="round" type="button" value="循环播放"> <input id="single" type="button" value="顺序播放"> </div> <div id="container"> <a id="prev" href="javascript:"><</a> <a id="next" href="javascript:">></a> <div id="order">1 / 4</div> <div id="info">图片一</div> <img id="picture" src="1-img/1.jpg"> </div> </body> </html
图片轮番
最新推荐文章于 2022-03-14 09:14:07 发布