图片切换

Love The Way You Lie 2022-06-16 13:29 199阅读 0赞

![切换效果图][SouthEast]

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ background: rgba(0,0,0,.8);} *{ padding: 0;margin: 0;box-sizing: border-box;} .box{ width: 440px;height: 510px;margin: 60px auto;background: #FFF; text-align: center;padding: 10px;} .title p{ margin: 10px;} .content{ border: 6px solid #ccc; width: 400px; height: 400px; position: relative; /*background: url(img/1.jpg);*/ } .top,.bottom{ background: rgba(0,0,0,0.6); width: 388px; height: 30px; line-height: 30px; text-align: center; color: rgba(255,255,255,0.6); } .bottom{ position: absolute;bottom: 0px; } .left,.right{ background: rgba(0,0,0,0.6); height: 40px; line-height: 40px; width: 40px; position: absolute; top: 45%; color: rgba(255,255,255,0.6); font-size: 40px; cursor: pointer; } .right{ position: absolute; right: 0px; } </style> </head> <body> <div class="box"> <div class="title"> <input type="button" id="btn1" name="" value="循环切换"> <input type="button" id="btn2" name="" value="顺序切换"> <p id="p1">图片可以从最后一张跳转到第一张循环切换</p> </div> <div id="content" class="content"> <div class="top" id="top"></div> <div class="left" id="left"><</div> <div class="right" id="right">></div> <div class="bottom" id="bottom"></div> </div> </div> <script type="text/javascript"> var oLeft=document.getElementById('left'); var oRight=document.getElementById('right'); var oTop=document.getElementById('top'); var oBottom=document.getElementById('bottom'); var oBtn1=document.getElementById('btn1'); var oBtn2=document.getElementById('btn2'); var oContent=document.getElementById('content'); var oP1=document.getElementById('p1'); var arr=["美女1","帅哥2","最美三","日美"]; // alert(arr.length); var num=1; // 图片变化函数 function imgTab(){ if(num==arr.length+1){ num=1; }else if(num==0){ num=4; } oContent.style.background='url(img/'+num+'.jpg)'; oBottom.innerHTML=arr[num-1]; oTop.innerHTML=num+"/"+ arr.length; } function imgTab2(){ if(num==arr.length+1){ alert("已经是最后一张了"); num=4; }else if(num==0){ alert("这是第一张哦"); num=1; } oContent.style.background='url(img/'+num+'.jpg)'; oBottom.innerHTML=arr[num-1]; oTop.innerHTML=num+"/"+ arr.length; } imgTab(); imgTab2(); // 图片运动方式：重复和一遍 function repeat(){ oRight.onclick=function(){ num++; imgTab(); } oLeft.onclick=function(){ num--; imgTab(); } } repeat();//初始化的运动方式是循环 function once(){ oRight.onclick=function(){ num++; imgTab2(); } oLeft.onclick=function(){ num--; imgTab2(); } } oBtn1.onclick=function(){ repeat(); oP1.innerHTML="图片可以从最后一张跳转到第一张循环切换"; } oBtn2.onclick=function(){ once(); oP1.innerHTML="图片只能一遍过哦"; } </script> </body> </html>

[SouthEast]: /images/20220616/c04752a2bc38408d84866ac9567990d5.png