左右平滑轮播动画+鼠标滑入放大动画demo

最新推荐文章于 2024-04-03 04:22:37 发布

逗子

最新推荐文章于 2024-04-03 04:22:37 发布

阅读量357

点赞数 1

分类专栏：前端前端css动画文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_37612425/article/details/127568458

版权

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

前端css动画

2 篇文章 0 订阅

订阅专栏

简单代码的记录，方便以后自己使用。

使用css/swiper制作的，左右平滑轮播,鼠标滑入当前图片放大。

效果图如下(图片来源于网络)：

整体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script> 
</head>
<body>
    <div class="design_chart">
        <div class="blocka">
            <img class="item2" src="../yangshi/images/7.jpg" alt="">
            <img class="item2" src="../yangshi/images/2.jpg" alt="">
            <img class="item2" src="../yangshi/images/3.jpg" alt="">
            <img class="item2" src="../yangshi/images/4.jpg" alt="">
            <img class="item2" src="../yangshi/images/5.jpg" alt="">
        </div>
        <div class="blockb">
            <img class="item3" src="../yangshi/images/7.jpg" alt="">
            <img class="item3" src="../yangshi/images/2.jpg" alt="">
            <img class="item3" src="../yangshi/images/3.jpg" alt="">
            <img class="item3" src="../yangshi/images/4.jpg" alt="">
            <img class="item3" src="../yangshi/images/5.jpg" alt="">
        </div>
    </div>
</body>
</html>

css样式：

.design {
      padding: 1rem 0;
    }
    .design_chart {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: .5rem;
    }
    .design_chart img {
      width: 4.75rem;
      transition: .3s;
    }
    .design_chart img:hover {
      transform: scale(1.05,1.05);
    }
    .swiper {
        width: 100%;
        height: 100%;
    }
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .item {
        width: 231px;
        height: 329px;
        float: left;
        margin-left: 30px;
    }
    .item:nth-child(1) {
        background: url("/static/www/2021/navigationDetails/china_electric_power/china_electric_powerimages/8.png") no-repeat 100% 100%;
        /*background-size: 100% 100%; 背景图尺寸 */
    }
    .item:nth-child(2) {
        background: url("/static/www/2021/navigationDetails/china_electric_power/china_electric_powerimages/11.png") no-repeat 100% 100%;
    }
    .item:nth-child(3) {
        background: url("/static/www/2021/navigationDetails/china_electric_power/china_electric_powerimages/4.png") no-repeat 100% 100%;
    }
    .item:nth-child(4) {
        background: url("/static/www/2021/navigationDetails/china_electric_power/china_electric_powerimages/6.png") no-repeat 100% 100%;
    }
    .big {
        width: 463px;
        height: 329;
    }
    .big img {
        display: none;
        height: 329px;
    }
    .blocka {
        width: 100%;
        height: 280px;
        position: relative;
        overflow: hidden;
    }
    .item2 {
        display: inline-block;
        white-space: nowrap;
        padding: 10px 30px;
        border-radius: 20px;
        color: white;
        position: absolute;
        left: 100%;
        width: 500px !important;
        height: 100%;
    }
    @keyframes runOne {
        from {
            left: 100%;
        }
        to {
            left: -20%;
        }
    }
    .item2.active2 {
        animation: runOne 15s linear infinite;
    }
    /* 第二个轮播 */
    .blockb {
        width: 100%;
        height: 270px;
        position: relative;
        overflow: hidden;
    }
    .item3 {
        display: inline-block;
        white-space: nowrap;
        padding: 10px 30px;
        border-radius: 20px;
        color: white;
        position: absolute;
        right: 100%;
        width: 500px !important;
        height: 100%;
    }
    @keyframes runOne1 {
        from {
            right: 100%;
        }
        to {
            right: -20%;
        }
    }
    .item3.active3 {
        animation: runOne1 15s linear infinite;
    }

<!-- 平行移动 -->
    <script>
        //循环运动展示处理
        //方式1 使用 animation 动画处理
        //总时间/总个数 =每个项运动的间隔
    
        //举例子 5秒钟 5个项 循环运动
        //处理运动
        var index = 0;
        var itemList = $('.item2');
        setInterval(() => {
            itemList.eq(index).addClass('active2');
            index++;
            if (index == itemList.length)
                index = 0;
        }, 3000);
    </script>
    
    <script>
        //循环运动展示处理
        //方式1 使用 animation 动画处理
        //总时间/总个数 =每个项运动的间隔
    
        //举例子 5秒钟 5个项 循环运动
        //处理运动
        var index1 = 0;
        var itemList1 = $('.item3');
        setInterval(() => {
            itemList1.eq(index).addClass('active3');
            index1++;
            if (index1 == itemList1.length)
                index1 = 0;
        }, 3000);
    </script>