demo-9-轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                position: absolute;
                z-index: 9;
                opacity: 0.7;
                bottom: 0px;
                left:50px;
            }
            li{
                list-style: none;
                float:left;
                /*display: block;*/
                width:60px;
                height:30px;
                line-height: 30px;
                text-align: center;
                /*font:20px "楷体";*/
                color: white;
                background: #333333;
                border:1px solid wheat;
            }
            li:hover{animation-play-state:paused;}
            
            #box{
                width:400px;
                height:300px;
                overflow: hidden;
                position: absolute;
                top:0;
                left:0;
                bottom: 0;
                right: 0;
                margin:auto;
                background:silver;
            }
            #inbox{
                animation-name: move;  /*动画名称*/
                animation-duration: 5s;
                animation-iteration-count: infinite;
                /*animation-timing-function: linear;*/
                width:calc(400px * 6);
                height:300px;
            }
            #inbox img{
                width:400px;
                height:300px;
                display:block;
            }
            /*#inbox:hover{
                animation-play-state:paused;
            }*/
            #inbox span{
                display: block;
                float:left;
                /*position: absolute;
                top:0;*/
            }
            @keyframes move {
                0%{
                    transform: translateX(0px);
                }
                20%{
                    transform: translateX(-400px);
                }
                40%{
                    transform: translateX(-800px);
                }
                60%{
                    transform: translateX(-1200px);
                }               
                80%{
                    transform: translateX(-1600px);
                }       
                100%{
                    transform: translateX(-2000px);
                }           
            }
            
            
            
            
            
            
            /*#box span:nth-child(1){left:0px;}
            #box span:nth-child(2){left:-400px;}
            #box span:nth-child(3){left:-800px;}
            #box span:nth-child(4){left:-1200px;}
            #box span:nth-child(5){left:-1600px;}*/
        </style>
    </head>
    <body>
        <div id = "box">
            <div id = "inbox">
                <span><img src="img/img1.jpg"></span>
                <span><img src="img/img2.jpg"></span>
                <span><img src="img/img3.jpg"></span>
                <span><img src="img/img4.jpg"></span>           
                <span><img src="img/img5.jpg"></span>
                <span><img src="img/img1.jpg"></span>
            </div>
            <div id = "num">
                <ul>
                    <li class = "n1">1</li>
                    <li class = "n2">2</li>
                    <li class = "n3">3</li>
                    <li class = "n4">4</li>
                    <li class = "n5">5</li>
                </ul>
            </div>
        </div>
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容