html 人物介绍 轮播,jQuery卡通人物介绍卡牌轮播切换代码

特效描述：jQuery 卡通人物介绍 卡牌轮播切换。jQuery卡通人物介绍卡牌轮播切换代码

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

Level 4

The Barbarian

The Barbarian is a kilt-clad Scottish warrior with an angry, battle-ready expression, hungry for destruction. He has Killer yellow horseshoe mustache.

20 ^S

Training

16

Speed

150

Cost

Level 5

The Archer

The Archer is a female warrior with sharp eyes. She wears a short, light green dress, a hooded cape, a leather belt and an attached small pouch.

25 ^S

Training

24

Speed

300

Cost

Level 5

The Giant

Slow, steady and powerful, Giants are massive warriors that soak up huge amounts of damage. Show them a turret or cannon and you'll see their fury unleashed!

2 ^M

Training

12

Speed

2250

Cost

Level 5

The Goblin

These pesky little creatures only have eyes for one thing: LOOT! They are faster than a Spring Trap, and their hunger for resources is limitless.

30 ^S

Training

32

Speed

100

Cost

Level 6

The Wizard

The Wizard is a terrifying presence on the battlefield. Pair him up with some of his fellows and cast concentrated blasts of destruction on anything, land or sky!

5 ^M

Training

16

Speed

4000

Cost

(function() {

var slideContainer = $('.slide-container');

slideContainer.slick();

$('.clash-card__image img').hide();

$('.slick-active').find('.clash-card img').fadeIn(200);

// On before slide change

slideContainer.on('beforeChange', function(event, slick, currentSlide, nextSlide) {

$('.slick-active').find('.clash-card img').fadeOut(1000);

});

// On after slide change

slideContainer.on('afterChange', function(event, slick, currentSlide) {

$('.slick-active').find('.clash-card img').fadeIn(200);

});

})();