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

Heim

Web-Frontend

js-Tutorial

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

May 16, 2016 pm 04:03 PM

jquery

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')//右按钮
});

Nach dem Login kopieren

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

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

    &lt;/div&gt;
    &lt;div class="nav"&gt;
      &lt;a class="prev" href="#"&gt;&lt;/a&gt;
      &lt;a class="next" href="#"&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;

Nach dem Login kopieren

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.

Erklärung dieser Website

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