轮播图

引言

最近距离下一科考试还有两周,所以比较闲。想起之前面试被问到了轮播图的实现,当时讲了一下大概思路,今天闲来无事就想着实现一下。(轮播图大概就是新闻那样可以左划、右划看图片)。

想法

我原来的想法是图片重叠在一起,然后更改透明度来实现更换图片,发现没有滑动的效果,就换了一种思路。在html中,写一个盒子装图片,图片统一向左浮动;然后在这个盒子外面添加一个盒子,起到窗口作用,限制用户的可见区域,通过改变图片的位置来达到轮播效果。

<!DOCTYPE html>
<title>轮播图</title>
<head>
    <style>
        #l{
            position: relative;
            top: -320px;
            left: -40px;
            margin: 0;
            padding: 0;
            width: 0px;
            height: 0px;
            border-left: 0px;
            border-right: 30px;
            border-top: 60px;
            border-bottom: 60px;
            border-color: transparent rgb(142, 142, 243) transparent transparent;
            border-style: solid;
            background-color: transparent;
            outline: transparent;
        }
        #l:hover{
            opacity: 0.6;
            cursor: pointer;
        }
        #r{
            position: relative;
            top: -320px;
            left: 970px;
            margin: 0;
            padding: 0;
            width: 0px;
            height: 0px;
            border-left: 30px;
            border-right: 0px;
            border-top: 60px;
            border-bottom: 60px;
            border-color: transparent transparent transparent rgb(142, 142, 243);
            border-style: solid;
            background-color: transparent;
            outline: transparent;
        }
        #r:hover{
            opacity: 0.6;
            cursor: pointer;
        
        }
        .z{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .box{
            width: 1000px;
            height: 625px;
            overflow: hidden;
        }
        #main{
            width: 5000px;
            height: 625px;
        }
       img{
           float: left;
           width: 1000px;
            height: 625px;
       }
       .im1s{
            transform: translateX(0px);
            transition: transform 1s;
       }
       .im1{
           transform: translateX(0px);
       }
       .im2{
        transform: translateX(-1000px);
        transition: transform 1s;
       }
       .im3{
        transform: translateX(-2000px);
        transition: transform 1s;
       }
       .im4{
        transform: translateX(-3000px);
        transition: transform 1s;
       }
       .im5{
        transform: translateX(-4000px);
        transition: transform 1s;
       }
       .im6{
           transform: translateX(-4000px);
       }
    </style>
</head>
<html>
    <body>
        <div class="z">
        <div class="box">
            <div  id='main' class="im1">
            <img  src="./爬虫/result2/超短甜美萝莉床上诱惑写真壁纸_1.jpg">
            <img src="./爬虫/result2/超短甜美萝莉床上诱惑写真壁纸_2.jpg">
            <img  src="./爬虫/result2/超短甜美萝莉床上诱惑写真壁纸_3.jpg">
            <img  src="./爬虫/result2/超短甜美萝莉床上诱惑写真壁纸_4.jpg">
            <img  src="./爬虫/result2/超短甜美萝莉床上诱惑写真壁纸_1.jpg">
        </div>
    </div>
        <input type="button" id="l">
        <input type="button" id="r">
        </div>
    </body>
    <script>
        document.getElementById('l').onclick=left;
        document.getElementById('r').onclick=right;

        function right(){
            document.getElementById('r').onclick=null;
            setTimeout(function(){
                document.getElementById('r').onclick=right;
            },1000);
            var clas=document.getElementById('main').className;
            if(clas=='im6'){
                document.getElementById('main').className='im4';
                return ;
            }
            if(clas=='im1'){
                document.getElementById('main').className='im6';
                setTimeout(function(){
                    document.getElementById('main').className='im4';
                });
                return ;
            }
            if(clas=='im2'){
                document.getElementById('main').className='im1s';
                setTimeout(function(){
                document.getElementById('main').className='im6';
                },1000);
            }else{
                document.getElementById('main').className='im'+(parseInt(clas[2])-1);
            }
        }
        function left(){
            document.getElementById('l').onclick=null;
            setTimeout(function(){
                document.getElementById('l').onclick=left;
            },1000);
            var clas=document.getElementById('main').className;
            if(clas=='im6'){
                document.getElementById('main').className='im1';
                setTimeout(function(){
                    document.getElementById('main').className='im2';
                },1000);
                return ;
            }
            if(clas=='im4'){
                document.getElementById('main').className='im5';
                setTimeout(function(){
                    document.getElementById('main').className='im1';
                },1000);
            }else{
                document.getElementById('main').className='im'+(parseInt(clas[2])+1);
            }
        }
    </script>
</html>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据