Utilisez vue pour écrire un exemple de code pour un graphique carrousel imitant un livre simplifié-js tutoriel-php.cn

Utilisez vue pour écrire un exemple de code pour un graphique carrousel imitant un livre simplifié

亚连

Libérer： 2018-05-30 16:02:53

original

2161 Les gens l'ont consulté

Cet article présente principalement l'exemple de code pour écrire un graphique carrousel imitant un simple livre en utilisant Vue. Maintenant, je le partage avec vous et le donne comme référence.

1. Montrez d'abord l'effet final :

2. > Le concept de Vue est de piloter la vue avec des données, il refuse donc d'obtenir l'effet de défilement en modifiant la marge supérieure de l'élément. Après avoir écrit le style CSS, il vous suffit de changer la classe de chaque image pour obtenir l'effet carrousel. L'effet d'animation est complété par une transition. L'image du carrousel peut être considérée comme deux (mainSlide et extraSlide). La position de chaque image est comme indiqué dans la figure :

3. >

Style de chaque diapositive :

Le modèle contient deux images carrousel :

$width: 800px;   // 容器宽度
$height: 300px;   // 容器高度
$bWidth: 500px;   // 大图片宽度
$sWidth: $width - $bWidth; // 小图片宽度
$sHeight: $height / 2; // 小图片高度
#slider-wrapper{
  width: $width;
  height: $height;
  margin: 0 auto;
  cursor: pointer;
  background: #ddd;
  border-radius: 5px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.117647), 0 1px 4px rgba(0,0,0,0.117647);
  display: flex;
  overflow: hidden;
  p{
    display: inline-block;
  }
}
.main-slide{
  width: $bWidth;
  height: $height;
  float: left;
  transition: all .4s ease;
}
.extra-slide{
  width: $sWidth;
  position: relative;
  .extra-slide-item{
    position: absolute;
    width: $sWidth;
    height: $sHeight;
    left: 0;
    transition: .4s ease-out;
  }
  .extra-slide-top{
    top: -$sHeight;
  }
  .extra-slide-middle-first{
    top: 0;
    z-index: 2
  }
  .extra-slide-middle-second{
    top: $sHeight;
    z-index: 2
  }
  .extra-slide-bottom{
    top: $height
  }
  .extra-slide-hide{
    display: none!important;
  }
}

Copier après la connexion

section scripts, définissez un nowIndex et modifiez nowIndex régulièrement. Les classes de toutes les images changent en fonction de ce nowIndex. Le type de carte es6 est utilisé ici Pour plus de détails, cliquez sur : http://www.jb51.net/article/111734.htm

<p id="slider-wrapper" @mouseover="stop" @mouseout="start">
  <!-- 轮播图1，mainSlide -->
  <p class="main-slide" :style="`background: url(${slideConfig[nowIndex].src})`"></p>
  <!-- 轮播图2，extraSlide -->
  <p class="extra-slide">
    <p class="extra-slide-item" :class="slideClass(i)" v-for="(v, i) in slideConfig" :key="i" :style="`background: url(${v.src}); background-size: cover`"></p>
  </p>
</p>

Copier après la connexion

<🎜. >

slideConfig, accessoires du composant :

export default {
  name: &#39;slider&#39;,
  data: function() {  
    return {
      slideInterval: null,
      nowIndex: 0,
      slideLength: this.slideConfig.length
    }
  },
  props: {
    slideConfig: {
      type: Array
    }
  },
  methods: {
    // 限制index不能超出图片列表长度
    resetIndex(i) {
      return i > this.slideLength - 1 ? i - this.slideLength : i
    },
    slideClass(i) {
      let nowIndex = this.nowIndex
      // Map就是key也可以是非字符串的对象，不用Map多写几个 if else 也可以
      let map = new Map([
        [this.resetIndex(nowIndex), &#39;extra-slide-top&#39;],
        [this.resetIndex(nowIndex + 1), &#39;extra-slide-middle-first&#39;],
        [this.resetIndex(nowIndex + 2), &#39;extra-slide-middle-second&#39;],
        [this.resetIndex(nowIndex + 3), &#39;extra-slide-bottom&#39;]
      ])
      // 图片的class根据nowIndex的变化而变化
      return map.get(i) ? map.get(i) : &#39;extra-slide-hide&#39;
    },
    start() {
      // 定时改变nowIndex
      this.slideInterval = setInterval(() => {
        this.nowIndex = this.nowIndex > this.slideLength - 2 ? 0 : this.nowIndex + 1
        console.log(this.nowIndex)
      }, 2000)
    },
    stop() {
      clearInterval(this.slideInterval)
      this.slideInterval = null
    }
  },
  mounted() {
    this.start()
  },
  destroyed() {
    this.stop()
  }
}

Copier après la connexion

Utilisation :

const prefix = &#39;/src/assets/&#39;
const slideConfig = [{
 src: prefix + &#39;s1.jpg&#39;,
 title: &#39;图1&#39;,
 desc: &#39;说明1&#39;
}, {
 src: prefix + &#39;s2.jpg&#39;,
 title: &#39;图2&#39;,
 desc: &#39;说明2&#39;
}, {
 src: prefix + &#39;s3.jpg&#39;,
 title: &#39;图3&#39;,
 desc: &#39;说明3&#39;
}, {
 src: prefix + &#39;s4.jpg&#39;,
 title: &#39;图4&#39;,
 desc: &#39;说明4&#39;
}, {
 src: prefix + &#39;s5.jpg&#39;,
 title: &#39;图5&#39;,
 desc: &#39;说明5&#39;
}, {
 src: prefix + &#39;s6.jpg&#39;,
 title: &#39;图6&#39;,
 desc: &#39;说明6&#39;
}]
export default slideConfig

Copier après la connexion

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

<slider :slideConfig="slideConfig" />

Copier après la connexion