我有使用html / css / JS的幻灯片放映。我想在第一张幻灯片上有一个按钮，它将触发第二张幻灯片显示。不知道如何去做。
的HTML：
<div class="flex__container flex--pikachu flex--active" data-slide="1">
<div class="flex__item flex__item--left">
<div class="flex__content">
<p class="text--sub">Pokemon Gen I</p>
<h1 class="text--big">Pikachu</h1>
<button> <p><i class="down"></i></p></button>
<p class="text--normal">Pikachu is an Electric-type Pokémon introduced in Generation I. Pikachu are small, chubby, and incredibly cute mouse-like Pokémon. They are almost completely covered by yellow fur.</p>
</div>
<p class="text__background">Pikachu</p>
</div>
<div class="flex__item flex__item--right"></div>
<img class="pokemon__img" src="https://s4.postimg.org/fucnrdeq5/pikachu.png" />
</div>
CSS：
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
i {
border: solid black;
border-width: 0 3px 3px 0;
display: inline-block;
padding: 3px;
}
一种方法是使用div元素[slide]上的data属性.flex__container将幻灯片放映一个。你可以：
[slide]通过选择带有类的元素来获取当前活动幻灯片的数据属性编号值.flex--active[slide]属性编号增加1（以使幻灯片向前移动1[slide]属性编号是否未超过幻灯片总数，如果是，请将其重置回起始幻灯片在代码中，它可能类似于：
$('.next').on('click', function(e) {
e.preventDefault();
/*
Extract current slide index and compute next index
*/
var current = $('.flex--active').data('slide');
var next = parseInt(current) + 1;
/*
Query next slide element from next slide index just computed
*/
var nextSlide = $('.slider__warpper')
.find('.flex__container[data-slide=' + next + ']');
/*
If the next slide does not exist, set it to the first slide (ie if
we've gone outside the range of slides, go back to beginning)
*/
if( nextSlide.length === 0 ) {
nextSlide = $('.slider__warpper').find('.flex__container[data-slide=1]')
};
/*
Cause slide nav to be in sync with navigation to next
*/
$('.slide-nav').removeClass('active');
$('.slide-nav', '.slider__navi').eq(next - 1).addClass('active');
/*
Use same transition/animation logic as in other navigation handler
*/
nextSlide.addClass('flex--preStart');
$('.flex--active').addClass('animate--end');
setTimeout(function() {
$('.flex--preStart')
.removeClass('animate--start flex--preStart')
.addClass('flex--active');
$('.animate--end')
.addClass('animate--start')
.removeClass('animate--end flex--active');
}, 800);
});
这也是一个有效的Codepen-希望能有所帮助！
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句