前端实现轮播图

提示：实现轮播图效果有三种实现方式，一是通过纯css实现；二是通过jQuery实现；三是通过swiper插件实现。

tips：可以用自己爱豆的图片，感觉简直不要太好~~~

目录

前言

一、HTML部分

二、JS部分

提示：

layer插件

盒子阴影（为优化效果）

文字渐变（为优化效果）

总结

---

前言

本文讲述的是第三种方式：通过使用swiper插件实现轮播，具体教程可参考Swiper

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML部分

<script src="js/vue.js"></script>
<link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
 <!-- 轮播图 -->
  <div class="swiper">
   <div class="swiper-wrapper">
    <div class="swiper-slide" v-for="(item,index) in picture" :key="index">
     <img :src="hrefURL+item" alt="" height="180rpx" width="100%">
    </div>
   </div>
   <!-- 如果需要分页器 -->
   <!-- <div class="swiper-pagination"></div> -->

   <!-- 如果需要导航按钮 -->
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>

   <!-- 如果需要滚动条 -->
   <!-- <div class="swiper-scrollbar"></div> -->
  </div>

二、JS部分

<script src="swiper/swiper-bundle.min.js"></script>
<script src="js/jquery.js"></script>
<script src="layer/layer.js"></script>
<script type="text/javascript">
 var vm = new Vue({
  el: '#content',
  data: {
   hrefURL: hrefURL,
   picture: []
  },
  mounted() {
   this.getImg()
  },
  methods: {
   //轮播图
   getImg() {
    let sendData = {};
    $.ajax({
     type: "post",
     url: hrefURL + '/api/index/banner',
     data: sendData,
     success: (res) => {
      if (res.code == 1) {
       console.log(res);
       this.picture = res.data
      } else {
       layer.msg(res.msg);
      }
     },
     error(err) {	
          layer.msg('网路出现故障；请稍后再试');
     }
    });
   }
  },


 })


 setTimeout(() => {
  var mySwiper = new Swiper('.swiper', {
   direction: 'horizontal', // 切换选项
   loop: true, // 循环模式选项
   autoplay: true, //可选选项，自动滑动
   navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
   },
  })
 }, 3000)
</script>

提示：

案例中使用了layer插件，以下为layer的详解。

layer插件

用于实现网页中的各种弹出层交互，layer插件运行环境是jQuery1.8及以上，因为layer是基于jQuery的一个插件，所以必须引入。

因此使用顺序为：

先去官网下载最新的layer插件     具体请参考  layer 弹出层组件
①引用jquery
②引用layer.min.js
layer引入文件的代码应该放在页面底部

盒子阴影（为优化效果）

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

文字渐变（为优化效果）

 background-image: -webkit-linear-gradient(bottom, #164A92, #1a92ca);

 -webkit-background-clip: text;

 -webkit-text-fill-color: transparent;

总结

本文仅仅简单介绍了通过swiper插件实现轮播，通过layer弹出层插件等方式优化用户体验，以上就是今天要讲的内容啦，如果有用，请不要忘记点个赞再离开哟~~~