HTML+CSS+JS实现 ❤️响应式图文卡片滑块展示特效❤️

清疚 2022-09-10 05:12 147阅读 0赞

> ##        效果演示： ##

![20210905100812227.gif][]

> ##    代码目录： ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16][]

> ## 主要代码实现： ##

### CSS样式： ###

@import url("https://fonts.googleapis.com/css?family=Quicksand:400,500,700&subset=latin-ext");
    html {
        position: relative;
        overflow-x: hidden !important;
    }
    
    body {
        font-family: "Quicksand", sans-serif;
    }
    
    a,
    a:hover {
        text-decoration: none;
    }
    
    .icon {
        display: inline-block;
        width: 1em;
        height: 1em;
        stroke-width: 0;
        stroke: currentColor;
        fill: currentColor;
    }
    
    .background {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    
    .background:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(45deg, rgba(209, 0, 42, 0.6) 0%, #0E5DC4 100%);
        opacity: 0.9;
    }
    
    .background img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        pointer-events: none;
        user-select: none;
    }
    
    .item-bg {
        width: 300px;
        height: 500px;
        position: absolute;
        top: 30px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);
        opacity: 0;
        transition: all 0.3s;
        left: -30px;
    }
    
    .item-bg.active {
        left: 0;
        top: 0;
        opacity: 1;
    }
    
    .news-slider {
        z-index: 2;
        max-width: 1300px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 60px;
    }
    
    @media screen and (max-width: 1300px) {
        .news-slider {
            max-width: 1000px;
        }
    }
    
    @media screen and (max-width: 576px) {
        .news-slider {
            margin-top: 45px;
        }
    }
    
    .news-slider__wrp {
        display: flex;
        align-items: flex-start;
        position: relative;
        z-index: 2;
    }
    
    .news-slider__item {
        width: 400px;
        flex-shrink: 0;
    }
    
    @media screen and (max-width: 992px) {
        .news-slider__item {
            width: 340px;
        }
    }
    
    .news-slider__item.swiper-slide {
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s;
    }
    
    .news-slider__item.swiper-slide-active,
    .news-slider__item.swiper-slide-prev,
    .news-slider__item.swiper-slide-next {
        opacity: 1;
        pointer-events: auto;
    }
    
    .news-slider__ctr {
        position: relative;
        z-index: 12;
    }
    
    .news-slider__arrow {
        background: #fff;
        border: none;
        display: inline-flex;
        width: 50px;
        height: 50px;
        justify-content: center;
        align-items: center;
        box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);
        border-radius: 50%;
        position: absolute;
        top: 50%;
        z-index: 12;
        cursor: pointer;
        outline: none !important;
    }
    
    .news-slider__arrow:focus {
        outline: none !important;
    }
    
    .news-slider__arrow .icon-font {
        display: inline-flex;
    }
    
    .news-slider__arrow.news-slider-prev {
        left: 15px;
        transform: translateY(-50%);
    }
    
    .news-slider__arrow.news-slider-next {
        right: 15px;
        transform: translateY(-50%);
    }
    
    .news-slider__pagination {
        text-align: center;
        margin-top: 50px;
    }
    
    .news-slider__pagination .swiper-pagination-bullet {
        width: 13px;
        height: 10px;
        display: inline-block;
        background: #fff;
        opacity: 0.2;
        margin: 0 5px;
        border-radius: 20px;
        transition: opacity 0.5s, background-color 0.5s, width 0.5s;
        transition-delay: 0.5s, 0.5s, 0s;
    }
    
    .news-slider__pagination .swiper-pagination-bullet-active {
        opacity: 1;
        background: #ffffff;
        width: 100px;
        transition-delay: 0s;
    }
    
    @media screen and (max-width: 576px) {
        .news-slider__pagination .swiper-pagination-bullet-active {
            width: 70px;
        }
    }
    
    .news__item {
        padding: 40px;
        color: #fff;
        border-radius: 10px;
        display: block;
        transition: all 0.3s;
    }
    
    @media screen and (min-width: 800px) {
        .news__item:hover {
            color: #222222;
            transition-delay: 0.1s;
        }
        .news__item:hover .news-date,
        .news__item:hover .news__title,
        .news__item:hover .news__txt {
            opacity: 1;
            transition-delay: 0.1s;
        }
        .news__item:hover .news__img {
            box-shadow: none;
        }
    }
    
    .news__item.active {
        color: #222222;
    }
    
    .news__item.active .news-date,
    .news__item.active .news__title,
    .news__item.active .news__txt {
        opacity: 1;
    }
    
    .news__item.active .news__img {
        box-shadow: none;
    }
    
    @media screen and (max-width: 992px) {
        .news__item {
            padding: 30px;
        }
    }
    
    @media screen and (max-width: 576px) {
        .news__item {
            padding: 20px;
        }
    }
    
    .news-date {
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 2px solid;
        display: inline-block;
        opacity: 0.7;
        transition: opacity 0.3s;
    }
    
    @media screen and (max-width: 576px) {
        .news-date {
            margin-bottom: 10px;
            display: inline-flex;
            align-items: center;
            padding-bottom: 0;
        }
    }
    
    .news-date__title {
        display: block;
        font-size: 32px;
        margin-bottom: 10px;
        font-weight: 500;
    }
    
    @media screen and (max-width: 576px) {
        .news-date__title {
            margin-right: 10px;
        }
    }
    
    .news-date__txt {
        font-size: 16px;
    }
    
    .news__title {
        font-size: 25px;
        font-weight: 500;
        opacity: 0.7;
        margin-top: 10px;
        margin-bottom: 15px;
        transition: opacity 0.3s;
    }
    
    @media screen and (max-width: 576px) {
        .news__title {
            font-size: 22px;
            margin-bottom: 10px;
        }
    }
    
    .news__txt {
        margin: 10px 0;
        line-height: 1.6em;
        font-size: 15px;
        opacity: 0.7;
        transition: opacity 0.3s;
    }
    
    .news__img {
        border-radius: 10px;
        box-shadow: 0 6px 26px 6px rgba(0, 0, 0, 0.25);
        height: 200px;
        margin-top: 30px;
        width: 100%;
        transition: all 0.3s;
        transform-origin: 0% 0%;
    }
    
    @media screen and (max-width: 576px) {
        .news__img {
            height: 180px;
            margin-top: 20px;
        }
    }
    
    .news__img img {
        max-width: 100%;
        border-radius: 10px;
        height: 100%;
        width: 100%;
    }

### 部分HTML代码 : ###

>     <!DOCTYPE html>
>     <html lang="en">
>     
>     <head>
>         <meta charset="UTF-8">
>         <title>响应式新闻卡片滑块</title>
>         <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
>     
>         <link rel='stylesheet' href='css/swiper.min.css'>
>         <link rel="stylesheet" href="css/style.css">
>     
>     </head>
>     
>     <body>
>     
>         <div class="wrapper">
>             <div class="background"><img src="img/b.jpg" alt=""></div>
>             <div class="item-bg"></div>
>             <div class="news-slider">
>                 <div class="news-slider__wrp swiper-wrapper">
>     
>                     <div class="news-slider__item swiper-slide">
>                         <a href="#" class="news__item">
>                             <div class="news-date"> <span class="news-date__title">24</span> <span class="news-date__txt">May</span> </div>
>                             <div class="news__title">漂亮山水</div>
>                             <p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p>
>                             <div class="news__img"> <img src="img/1.jpg" alt="news"> </div>
>                         </a>
>                     </div>
>     
>                     <div class="news-slider__item swiper-slide">
>                         <a href="#" class="news__item">
>                             <div class="news-date"> <span class="news-date__title">25</span> <span class="news-date__txt">May</span> </div>
>                             <div class="news__title">旅游景点</div>
>                             <p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p>
>                             <div class="news__img"> <img src="img/2.jpg" alt="news"> </div>
>                         </a>
>                     </div>
>     
>                     <div class="news-slider__item swiper-slide">
>                         <a href="#" class="news__item">
>                             <div class="news-date"> <span class="news-date__title">26</span> <span class="news-date__txt">May</span> </div>
>                             <div class="news__title">景区打卡</div>
>                             <p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p>
>                             <div class="news__img"> <img src="img/3.jpg" alt="news"> </div>
>                         </a>
>                     </div>
>     
>                     <div class="news-slider__item swiper-slide">
>                         <a href="#" class="news__item">
>                             <div class="news-date"> <span class="news-date__title">27</span> <span class="news-date__txt">May</span> </div>
>                             <div class="news__title">城市美景</div>
>                             <p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p>
>                             <div class="news__img"> <img src="img/4.jpg" alt="news"> </div>
>                         </a>
>                     </div>
>     
>                     <div class="news-slider__item swiper-slide">
>                         <a href="#" class="news__item">
>                             <div class="news-date"> <span class="news-date__title">28</span> <span class="news-date__txt">May</span> </div>
>                             <div class="news__title">旅游景点</div>
>                             <p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p>
>                             <div class="news__img"> <img src="img/5.jpg" alt="news"> </div>
>                         </a>
>                     </div>
>     
>                     <div class="news-slider__item swiper-slide">
>                         <a href="#" class="news__item">
>                             <div class="news-date"> <span class="news-date__title">29</span> <span class="news-date__txt">May</span> </div>
>                             <div class="news__title">景区打卡</div>
>                             <p class="news__txt"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s... </p>
>                             <div class="news__img"> <img src="img/6.jpg" alt="news"> </div>
>                         </a>
>                     </div>
>     
>                 </div>
>     
>                 <div class="news-slider__ctr">
>     
>                     <div class="news-slider__arrows">
>                         <button class="news-slider__arrow news-slider-prev">
>     					<span class="icon-font">
>     						<svg class="icon icon-arrow-left">
>     							<use xlink:href="#icon-arrow-left"></use>
>     						</svg>
>     					</span>
>     				</button>
>     
>                         <button class="news-slider__arrow news-slider-next">
>     					<span class="icon-font">
>     						<svg class="icon icon-arrow-right">
>     							<use xlink:href="#icon-arrow-right"></use>
>     						</svg>
>     					</span>
>     				</button>
>                     </div>
>     
>                     <div class="news-slider__pagination"></div>
>                 </div>
>     
>             </div>
>         </div>
>     
>         <svg hidden="hidden">
>       <defs>
>         <symbol id="icon-arrow-left" viewBox="0 0 32 32">
>           <title>arrow-left</title>
>           <path d="M0.704 17.696l9.856 9.856c0.896 0.896 2.432 0.896 3.328 0s0.896-2.432 0-3.328l-5.792-5.856h21.568c1.312 0 2.368-1.056 2.368-2.368s-1.056-2.368-2.368-2.368h-21.568l5.824-5.824c0.896-0.896 0.896-2.432 0-3.328-0.48-0.48-1.088-0.704-1.696-0.704s-1.216 0.224-1.696 0.704l-9.824 9.824c-0.448 0.448-0.704 1.056-0.704 1.696s0.224 1.248 0.704 1.696z"></path>
>         </symbol>
>         <symbol id="icon-arrow-right" viewBox="0 0 32 32">
>           <title>arrow-right</title>
>           <path d="M31.296 14.336l-9.888-9.888c-0.896-0.896-2.432-0.896-3.328 0s-0.896 2.432 0 3.328l5.824 5.856h-21.536c-1.312 0-2.368 1.056-2.368 2.368s1.056 2.368 2.368 2.368h21.568l-5.856 5.824c-0.896 0.896-0.896 2.432 0 3.328 0.48 0.48 1.088 0.704 1.696 0.704s1.216-0.224 1.696-0.704l9.824-9.824c0.448-0.448 0.704-1.056 0.704-1.696s-0.224-1.248-0.704-1.664z"></path>
>         </symbol>
>       </defs>
>     </svg>
>     
>         <script src="js/jquery.min.js"></script>
>         <script src='js/swiper.min.js'></script>
>         <script src="js/script.js"></script>
>     
>     </body>
>     
>     </html>

上面的img图片和jquery.min.js等需要引入即可运行

> ## 源码获取 ##
> 
> 精彩推荐更新中：
> 
> ### [HTML5大作业实战100套][HTML5_100] ###

>   打卡 文章 更新**  37  **/  100天
> 
> 大家可以**点赞、收藏、关注、评论**我啦 、需要完整文件随时联系我或交流哟~！

![在这里插入图片描述][8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]

[20210905100812227.gif]: /images/20220829/e240719b82754ef4a9e4988c0939a2e6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAamF2YeadjumYs-WLhw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/1a6b343f8fa74a66b9d186c450f74f8e.png
[HTML5_100]: https://blog.csdn.net/weixin_39709134/category_11287267.html
[8e6bebf6b7cd409abc03ca5fcb83f826.gif_pic_center]: /images/20220829/9a67b5baf993420c972ecf2242d69653.png