图片切换

最新推荐文章于 2023-03-27 09:31:26 发布

VLilyV

最新推荐文章于 2023-03-27 09:31:26 发布

阅读量397

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/VLilyV/article/details/72301792

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

切换效果图

<!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>