slaid pemalam jQuery untuk mencapai kesan karusel lancar

slaid pemalam jQuery untuk mencapai kesan karusel lancar_jquery

WBOY

Lepaskan： 2016-05-16 16:03:19

asal

1643 orang telah melayarinya

Mulakan pemalam:

slaid ialah pemalam carta karusel lancar berdasarkan jQuery, yang menyokong animasi elemen dalam carta dan boleh menyesuaikan jenis animasi

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

Salin selepas log masuk

Keserasian: ie8, google, firefox, 360, QQ, OPEN, safi

contoh html:

Slaid secara lalai akan menambah kesan animasi pada elemen dengan nama kelas moveElem dalam setiap peluncur Atribut rel pada elemen menetapkan masa pelaksanaan tertunda yang sepadan Setiap peluncur boleh digunakan pada masa yang sama unsur

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

Salin selepas log masuk

Alamat Github: https://github.com/727712787/jquery.slides Alamat muat turun: https://github.com/727712787/jquery.slides/archive/master.zip

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.