JavaScript图片转换效果

xiaoxiao2021-03-25 162

*{margin: 0;padding:0;} #box{ width: 320px; height: 200px; border:1px solid red; margin:100px auto; position:relative; } #box p{ position:absolute; top:50%; margin-top: -50px; background:rgba(0,0,0,0.5); color:#fff; font-size:50px; font-weight:bold; width:30px; text-align:center; line-height:100px; cursor:pointer; } #box #prev{ left:0; } #box #next{ right:0; } .pic{ margin: 12px 30px; width:260px; height: 160px; position:relative; } .text{ position:absolute; left:0; bottom: 3px; height:20px; line-height:20px; text-align: center; color:yellow; width:100%; background: rgba(255,0,0,.5); } window.οnlοad=function() { var oPrev = document.getElementById('prev'); var oNext = document.getElementById('next'); var oImg = document.getElementById('img'); var iNow = 1; oNext.οnclick=function (){ iNow++; //iNow是定义的一个变量并赋上值 if(iNow==6){ iNow=1; -------点击一下事件iNow+1,当iNow==6时，iNow将变成1 } oImg.src='../img/'+iNow+'.jpg';/*注：一共是5张图，所以当你点击第五张时自动转到第一张*/ }; oPrev.onclick = function () { iNow--; if (iNow == 0) { iNow = 5; } oImg.src = '../img/' + iNow + '.jpg'; }; }; <div id="box"> <p id="prev"><</p> <p id="next">></p> <div class="pic"> <img id="img" width="260px" heght="160px" src="../img/1.jpg" alt=""/> <div class="text">哈士奇;憨厚、忠诚、傻傻的</div> </div> </div>

转载请注明原文地址: https://ju.6miu.com/read-5701.html

技术

最新回复(0)