使用jquery实现无缝轮播图

最新推荐文章于 2023-06-28 14:53:42 发布

閊行

最新推荐文章于 2023-06-28 14:53:42 发布

阅读量613

点赞数 1

文章标签： jquery css javascript

本文链接：https://blog.csdn.net/gq1050878698/article/details/122549086

版权

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    ul,
    li {
        list-style: none;
    }
    
    .container {
        width: 1226px;
        height: 460px;
        overflow: hidden;
        margin: 0 auto;
        position: relative;
    }
    
    img {
        width: 1226px;
        height: 460px;
        display: block;
    }
    
    .loop {
        /* width: 4904px; */
        position: relative;
    }
    
    .list {
        float: left;
    }
    
    .left,
    .right {
        width: 40px;
        height: 60px;
        background-color: rgba(24, 3, 3, 0.5);
        position: absolute;
        top: 50%;
        margin-top: -20px;
    }
    
    .left {
        left: 0px;
    }
    
    .right {
        right: 0;
    }
    
    .pagenation {
        position: absolute;
        bottom: 20px;
        right: 50px;
    }
    
    .pagenation li {
        float: left;
        margin: 0 10px;
        width: 20px;
        height: 20px;