html小圆图堆叠轮播,jQuery和CSS3堆叠式轮播图特效

这是一款jQuery和CSS3堆叠式轮播图特效。该轮播图通过css将图片堆叠到一起，然后通过jquery代码来控制在切换时，不断的显示下一张图片。

使用方法

在头部引入style.css文件。

HTML结构

<

• 

  Watch your way toward success as you excel above your competitors.

• 

  Relax and chill, we've got you covered :)

• 

  Boost your social networking presence

• 

  Be at the top of your competitors

• 

  Create contents for your online courses

>

javascript

var $card = $('.card');

var lastCard = $(".card-list .card").length - 1;

$('.next').click(function(){

var prependList = function() {

if( $('.card').hasClass('activeNow') ) {

var $slicedCard = $('.card').slice(lastCard).removeClass('transformThis activeNow');

$('ul').prepend($slicedCard);

}

}

$('li').last().removeClass('transformPrev').addClass('transformThis').prev().addClass('activeNow');

setTimeout(function(){prependList(); }, 150);

});

$('.prev').click(function() {

var appendToList = function() {

if( $('.card').hasClass('activeNow') ) {

var $slicedCard = $('.card').slice(0, 1).addClass('transformPrev');

$('.card-list').append($slicedCard);

}}

$('li').removeClass('transformPrev').last().addClass('activeNow').prevAll().removeClass('activeNow');

setTimeout(function(){appendToList();}, 150);

});