轮播图示例

摸_鱼

已于 2022-03-28 14:25:30 修改

阅读量246

点赞数

分类专栏：前端文章标签： vue json ajax css html5

于 2022-03-21 09:54:27 首次发布

本文链接：https://blog.csdn.net/m0_46578907/article/details/121940597

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

轮播图

介绍

使用了vue，swiper组件
数据交互部分使用了ajax，和json格式的数据文件进行交互

效果图

在这里插入图片描述

鼠标放上去会有一些样式变化

代码

1. html部分

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <!--插件基本框架-->
  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.11.2/css/all.css"/>
  <link type="text/css" rel="stylesheet" href="https://repo.bfw.wiki/bfwrepo/css/swiper.4.5.1.css">
  <!--页面布局样式-->
  <link rel="stylesheet" href="../../css/ZUJIAN/top10.css">
</head>
<body>
<div class="swiper-container-solution" >
  <div class="selected-solution" id="app">
    <div class="swiper-container">
      <div class="layer-title">TOP-10</div>
      <!--      卡片列表-->
      <div  class="solution-cardlist swiper-wrapper" >
        <!--        存放卡片列表的一列-->
        <div class="col-sm-4 swiper-slide" v-for="(item,index) in datas">
          <div class="solution-card">
            <img :src='item.image'>
            <h3>top{{index+1}}</h3>
            <p></p>
            <dl class="overflow-hide cf">
              <dt>作者: {{item.author}}</dt>
              <dt>当前拍卖价格: {{item.price}}</dt>
              <dt>作品介绍: {{item.info}}</dt>
            </dl>
            <span>
              <a href="#"><span class="arrow-more">了解详情</span></a>
            </span>
          </div>
        </div>
      </div>
    </div>

    <div id="prev"><i class="fas fa-chevron-left"></i></div>
    <div id="next"><i class="fas fa-chevron-right"></i></div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
<script type="text/javascript" src="https://repo.bfw.wiki/bfwrepo/js/swiper.4.5.1.js"></script>
<script type="text/javascript">
  $(function (){
    $.ajax({
      type:'get',
      url:'../../json/top10.json',
      success:function (data){
        if(data.msg == "ok" && data.code===200){
          pushDom(data.data);
        }else {
          alert("服务器请求数据异常");
        }
      },
      error:function (data){
        alert(JSON.stringify(data));
      }
    });
    function pushDom(data1){
      var swiper = new Vue({
        el:'#app',
        data:{
          datas:data1
        },
        mounted(){
          var mySwiper = new Swiper(".swiper-container", {

            //默认功能属性
            speed: 250,
            slidesPerView: 3,
            spaceBetween: 0,
            slidesPerGroup: 3,
            loop: true,
            autoplay: true,

            //分页索引
            pagination: {
              el: ".swiper-pagination",
              clickable: true
            },

            //分页按钮
            navigation: {
              nextEl: "#next",
              prevEl: "#prev"
            }

          });
        }
      });
    }

  })

</script>
</body>
</html>

2. css部分

*{
  padding:0;
  margin:0;
  font-family:"Microsoft YaHei UI";
  box-sizing:border-box;
  outline:none;
}
:after,:before{
  box-sizing:inherit;
}
a{
  text-decoration:none;
  color:inherit;
}
ul{
  list-style:none;
}
.col-sm-4{
  float:left;
  position:relative;
  width:33.33333333%;
}
.selected-solution{
  height:700px;
  /*background:#f1f3ff;*/
}
.selected-solution>div{
  position:relative;
  width:1200px;
  margin:0 auto;
}
.selected-solution .swiper-container{
  height:695px;
  width:1200px;
}
.selected-solution .layer-title{
  color:#393b40;
  padding:50px 0 30px;
  text-align:center;
  font-size:30px;
  letter-spacing:1.09px;
}
/*主体列表*/
.selected-solution .solution-cardlist{
  max-width:1200px;
  margin:20px auto 0;
}
.swiper-slide,.swiper-wrapper{
  height:560px!important;
}
.selected-solution .solution-cardlist .col-sm-4{
  padding:0 10px;
  top:0;
  transition:all .15s linear;
  box-sizing:border-box;
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card{
  height:480px;
  background:#fff;
  border-radius:6px;
  text-align:left;
  overflow:hidden;
  transition:all .15s linear;
}

.selected-solution .solution-cardlist .col-sm-4:hover{
  position:relative;
  top:-20px;
  transition:all .25s linear;
}
.selected-solution .solution-cardlist .col-sm-4:hover .solution-card{
  height:530px;
  box-shadow:0 10px 40px 0 rgba(0,0,0,.1);
  transition:all .2s linear;
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card img{
  /*width:auto;*/
  /*height:200px;*/
  transition:all .2s linear;
  align-self: center;
  object-fit: contain;
  height: 200px;
  width: 100%;
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card h3{
  margin:20px 30px 10px;
  font-size:18px;
  color:#252b3a;
  letter-spacing:.65px;
  text-align:left;
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card p{
  margin:0 30px;
  padding-bottom:30px;
  font-size:14px;
  color:#666a75;
  letter-spacing:.51px;
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card dl{
  margin:0 30px;
  overflow:visible;
}
.cf:after,.cf:before{
  content:" ";
  display:table;
  line-height:0
}
.cf:after{
  clear:both;
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card dl dt{
  margin-bottom:10px;
  font-size:14px;
  color:#252b3a;
  letter-spacing:.51px;
  line-height:19px;
  position:relative;
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card dl dt:before{
  position:absolute;
  display:inline-block;
  left:-8px;
  top:7px;
  content:'';
  vertical-align:middle;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#252b3a;
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card dl dd{
  float:left;
  width:50%;
  margin-bottom:6px;
  font-size:12px;
  color:#a0a2a8;
  letter-spacing:.44px;
  line-height:20px;
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card>span{
  margin:20px 30px 0;
  font-size:14px;
  display:inline-block;
  color:#666a75;
  letter-spacing:.51px;
  line-height:22px;
  opacity:0;
  transition:opacity .15s linear;
}
.selected-solution .solution-cardlist .col-sm-4:hover .solution-card>span{
  opacity:1;
  transition:opacity .2s linear 50ms;
}
/*了解更多*/
.selected-solution .solution-cardlist .col-sm-4 .solution-card>span a span{
  display:inline-block;
  vertical-align:middle;
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card>span a span.arrow-f{
  width:13px;
  height:13px;
  background:url(https://repo.bfw.wiki/bfwrepo/svg/swiper/marketplace-selected-arrow0.svg);
  display:inline-block;
  vertical-align:middle;
  margin-left:5px;
  position:relative;
  transition:.3s ease-out;
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card>span a:hover{
  color:#e6c16c;
}
.selected-solution .solution-cardlist .col-sm-4 .solution-card>span a:hover span.arrow-f{
  transform:translate(4px,0);
  background:url(https://repo.bfw.wiki/bfwrepo/svg/swiper/marketplace-selected-arrow2.svg);
}
/*重置swiper*/
.swiper-container-horizontal>.swiper-pagination-bullets.solution-pagination{
  bottom:15px;
}
.solution-pagination .swiper-pagination-bullet{
  width:24px;
  height:4px;
  border-radius:100px;
  overflow:hidden;
  background:#dfe1f1;
  border:none;
  cursor:pointer;
  content:'';
  display:inline-block;
  box-sizing:border-box;
  opacity:1;
  vertical-align:middle;
}
.solution-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{
  background:#f66f6a;
  box-sizing:border-box;
}

#prev,
#next{
  position: absolute;
  z-index: 150;
  width: 60px;
  height: 60px;
  font-size: 36px;
  color: white;
  text-align: center;
  line-height: 60px;
  background-color: rgba(0,0,0,0.6);
  border-radius: 50%;
  top:calc(50% - 18px);
  left:80px;
  transition:all 0.2s;
  cursor:pointer;
}

#next{
  left:unset;
  right: 80px;
}
#prev:hover,#next:hover{
  background-color: rgba(255,255,255,0.6);
  color:black;
}

3. json部分

{
  "code": 200,
  "msg": "ok",
  "data": [
    {
      "name": "top1",
      "image": "../../img/1.jpg",
      "price": "1.81ETH",
      "author": "kkk",
      "info": "dhskahhskajhkhkjhlkoewfogxcbm"
    },
    {
      "name": "top2",
      "image": "../../img/2.jpg",
      "price": "1.17ETH",
      "author": "kkk",
      "info": "dhskahhskajhkhkjhlkoewfogxcbm"
    },
    {
      "name": "top3",
      "image": "../../img/3.jpg",
      "price": "1.61ETH",
      "author": "kkk",
      "info": "dhskahhskajhkhkjhlkoewfogxcbm"
    },
    {
      "name": "top4",
      "image": "../../img/4.jpg",
      "price": "1.15ETH",
      "author": "kkk",
      "info": "dhskahhskajhkhkjhlkoewfogxcbm"
    },
    {
      "name": "top5",
      "image": "../../img/5.jpg",
      "price": "1.41ETH",
      "author": "kkk",
      "info": "dhskahhskajhkhkjhlkoewfogxcbm"
    },
    {
      "name": "top6",
      "image": "../../img/6.jpg",
      "price": "1.14ETH",
      "author": "kkk",
      "info": "dhskahhskajhkhkjhlkoewfogxcbm"
    },
    {
      "name": "top7",
      "image": "../../img/7.jpg",
      "price": "1.21ETH",
      "author": "kkk",
      "info": "dhskahhskajhkhkjhlkoewfogxcbm"
    },
    {
      "name": "top8",
      "image": "../../img/8.jpg",
      "price": "1.12ETH",
      "author": "kkk",
      "info": "dhskahhskajhkhkjhlkoewfogxcbm"
    },
    {
      "name": "top9",
      "image": "../../img/9.jpg",
      "price": "12.1ETH",
      "author": "kkk",
      "info": "dhskahhskajhkhkjhlkoewfogxcbm"
    },
    {
      "name": "top10",
      "image": "../../img/10.jpg",
      "price": "1.12ETH",
      "author": "kkk",
      "info": "dhskahhskajhkhkjhlkoewfogxcbm"
    }
  ]
}