Diapositives du plug-in jQuery pour obtenir des effets de carrousel transparents

Diapositives du plug-in jQuery pour obtenir des effets de carrousel transparents_jquery

WBOY

Libérer： 2016-05-16 16:03:19

original

1673 Les gens l'ont consulté

Initialiser le plugin :

slides est un plug-in de graphique carrousel transparent basé sur jQuery, qui prend en charge l'animation des éléments du graphique et peut personnaliser le type d'animation

$(".slideInner").slide({
slideContainer: $('.slideInner a'),
effect: 'easeOutCirc',//动画类型
autoRunTime: 5000,//自动轮播时间
slideSpeed: 1000,//速度
nav: true,//是否显示左右导航
autoRun: true,//是否自动滚动
prevBtn: $('a.prev'),//左按钮
nextBtn: $('a.next')//右按钮
});

Copier après la connexion

Compatibilité : ie8, google, firefox, 360, QQ, OPEN, safi

exemple HTML :

Les diapositives ajouteront par défaut des effets d'animation aux éléments avec le nom de classe moveElem dans chaque curseur. L'attribut rel sur l'élément définit le temps d'exécution retardé correspondant et le type d'animation. Chaque curseur peut être utilisé en même temps. éléments

<body>
  <div class="slides">
    <div class="slideInner">
      <a href="#" style="background: url(img/slide1.jpg) no-repeat;">
        <div class="moveElem img1" rel="0,easeInOutExpo">
          <img src="img/slide1p1.png" />
        </div>
        <div class="moveElem img2" rel="150,easeInOutExpo">
          <img src="img/slide1p2.png" />
        </div>
      </a>
      <a href="#" style="background: url(img/slide2.jpg) no-repeat">
        <div class="moveElem img1" rel="0,easeInOutExpo">
          <img src="img/slide2p1.png" />
        </div>
      </a>
      <a href="#" class="slide3" style="background: url(img/slide3.jpg) no-repeat;">
        <div class="moveElem img1" rel="0,easeInOutExpo">
          <img src="img/slide3p1.png" />
        </div>
        <div class="moveElem img2" rel="150,easeInOutExpo">
          <img src="img/slide3p2.png" />
        </div>
        <div class="moveElem img3" rel="300,easeInOutExpo">
          <img src="img/slide3p3.png" />
        </div>
      </a>
      <a href="#" style="background: rgb(113, 209, 231);">
        <div class="moveElem img1" rel="0,easeInOutExpo">
          <img src="img/slide1p1.png" />
        </div>
        <div class="moveElem img2" rel="150,easeInOutExpo">
          <img src="img/slide1p2.png" />
        </div>
      </a>
      <a href="#" style="background: rgb(178, 44, 44);">
        <div class="moveElem img1" rel="0,easeInOutExpo">
          <img src="img/slide1p1.png" />
        </div>
        <div class="moveElem img2" rel="150,easeInOutExpo">
          <img src="img/slide1p2.png" />
        </div>
      </a>

    </div>
    <div class="nav">
      <a class="prev" href="#"></a>
      <a class="next" href="#"></a>
    </div>
  </div>
</body>

Copier après la connexion

Adresse Github : https://github.com/727712787/jquery.slidesAdresse de téléchargement : https://github.com/727712787/jquery.slides/archive/master.zip

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.