Question

我使用CSS和jQuery创建小动画图形。当您单击按钮时，会有一系列动画从幻灯片切换到幻灯片。

我目前使用此方法：

<script>
$(function() {
$("#z-tab1").click(function() {
$(".zSlide1").removeClass("zhide");
$(".zSlide2").removeClass("zshow");
$(".zSlide3").removeClass("zshow");

//hide previous slides
$(".zSlide1").addClass("zshow");
$(".zSlide2").addClass("zhide");
$(".zSlide3").addClass("zhide");

</script>
<style>
.zhide{ display:none; }
.zshow{ display:block;}

/*slide 1 */
.zSlide1 {
width:100%;
height:100%;
max-width:600px;
min-height:500px;
min-width:320px;}

有没有更好的方法来实现这一目标？

提前致谢;）

Answer 1

只需链接课程并切换显示

$("#z-tab1").click(function() {

    $(".zSlide1, .zSlide2, .zSlide3").toggle();

});

Answer 2

您可以这样做：

//设置活动幻灯片以在页面加载时显示 $（ 'elem1 '）addClass（' activeSlide'）;

// count your elements(which class name starts with "elem") and push them into an array
var 
elems = 0,
i = 1;

$('[class^="elem"]').each(function(){
    elems +=1;
});

// display one element at a time, by modifying the z-index value
$('.button').on('click', function(e){
    e.preventDefault();
    i+=1;
    if(i > elems ){ i = 1; };
    $('[class^="elem' + i + '"]').addClass('activeSlide').siblings().removeClass('activeSlide');
});

示例：http://jsfiddle.net/WrQ4L/1/

请记住，此方法需要将类名升序编号（“i”的初始值等于第一个类号 - ＆gt; elem1）

CSS＆amp; jQuery（Q1）：点击时从幻灯片切换到幻灯片的最佳轻量级方法

2 个答案: