jquery-carousel

作者:frank 发表日期:2015-08-11 12:05:18 更新日期:2016-08-15 20:04:46 分类:猿文色

摘要

基于jQuery实现的图片轮播效果。

正文

配置如下:

$(".wan-carousel-1, .wan-carousel-2").WanCarousel();
$(".wan-carousel-3").WanCarousel({
  interval: 8000,
  speed: 1000,
});
$(".wan-carousel-4").WanCarousel({
  interval: 2000,
  speed: 200,
  callback: function(element, index) {//called when animaton end

  }
});

HTML文件如下:

<div class="wan-carousel wan-carousel-1" style="width: 50%; float:left;">
  <div class="carousel-list">
    <img src="img/1.jpg" alt="img">
    <img src="img/2.jpg" alt="img">
    <img src="img/3.jpg" alt="img">
    <img src="img/4.jpg" alt="img">
  </div>
</div>
<div class="wan-carousel wan-carousel-2" style="width: 50%; float:left;">
  <div class="carousel-list">
    <a href="#">
      <img src="img/1.jpg" alt="img">
    </a>
    <img src="img/2.jpg" alt="img">
  </div>
</div>
<div class="wan-carousel wan-carousel-3" style="width: 50%; float:left;">
  <div class="carousel-list">
    <img src="img/2.jpg" alt="img">
    <img src="img/3.jpg" alt="img">
    <img src="img/4.jpg" alt="img">
  </div>
</div>
<div class="wan-carousel wan-carousel-4" style="width: 50%; float:left;">
  <div class="carousel-list">
    <a href="#">
      <img src="img/1.jpg" alt="img">
    </a>
    <img src="img/2.jpg" alt="img">
  </div>
</div>

DEMO