圖片切換

圖片切換

原創

2020-02-22 11:22

<!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.οnclick=function(){
            num++;
            imgTab();   
            }
            oLeft.οnclick=function(){   
                num--;
                imgTab();
            }
        }
        repeat();//初始化的運動方式是循環
        function once(){
            oRight.οnclick=function(){
            num++;
            imgTab2();  
            }
            oLeft.οnclick=function(){   
                num--;
                imgTab2();
            }
        }
        oBtn1.οnclick=function(){
            repeat();
            oP1.innerHTML="圖片可以從最後一張跳轉到第一張循環切換";
        }
        oBtn2.οnclick=function(){
            once();
            oP1.innerHTML="圖片只能一遍過哦";
        }   
    </script>
</body>
</html>