suchen

Heim >Web-Frontend >js-Tutorial >jQuery-Plug-in-Folien, um nahtlose Karusselleffekte zu erzielen_jquery

jQuery-Plug-in-Folien, um nahtlose Karusselleffekte zu erzielen_jquery

WBOY
WBOYOriginal
2016-05-16 16:03:191687Durchsuche

Plugin initialisieren:

Slides ist ein nahtloses Karusselldiagramm-Plug-in auf Basis von jQuery, das die Animation von Elementen im Diagramm unterstützt und den Animationstyp anpassen kann

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

Kompatibilität: ie8, Google, Firefox, 360, QQ, OPEN, Safi

HTML-Beispiel:

Slides fügt standardmäßig Animationseffekte zu den Elementen mit dem Klassennamen moveElem in jedem Slider hinzu. Das rel-Attribut des Elements legt die entsprechende verzögerte Ausführungszeit und den Animationstyp fest. Jeder Slider kann gleichzeitig verwendet werden Elemente 

<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>

Github-Adresse: https://github.com/727712787/jquery.slides Download-Adresse: https://github.com/727712787/jquery.slides/archive/master.zip

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Perfekt kompatibel mit mehreren Browsern, js Beurteilung Bildpfadcode Zusammenfassung_Javascript-KenntnisseNächster Artikel：Perfekt kompatibel mit mehreren Browsern, js Beurteilung Bildpfadcode Zusammenfassung_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen