Question

我最近和现在正在玩jquery - 尝试让动画工作。

整个想法基本上是一个全屏滑块。我们有几个部分的位置绝对和高度100％的文件 - 在jquery我们正在玩z-index。它非常简单，但我无法弄清楚如何制作适当的左右动画幻灯片。它总是在破碎。

＆＃13;

$(document).ready(function() {

	var windowWidth = $(window).width();
	var slideCount = $('.slide').length;

	$('button#next').on('click', function() {
		var slideActive = $('.slide.active');
		var nextSlide = slideActive.next('.slide');
		
		nextSlide.addClass('active').animate({
			'z-index' : '2',
			'left' : windowWidth
		},500);
		
		slideActive.removeClass('active');

	});

	

});;

＆＃13;

body, html {
	height: 100%;
	position: relative;
}

body {
	font-size: 14px;
	color: #fff;
}

nav {
	position: absolute;
	top: 2rem;
	right: 2rem;
	z-index: 99;
}

section {
	height: 100%;
	display: flex;
	align-items: center;
	position: absolute;
	right: 0;
	left: 0;
}

section#home {
	background-color: #2c3e50;
}

section#aboutMe {
	background-color: #e74c3c;
}

section#smthElse {
	background-color: #1abc9c;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
  <button id="prev">Back</button>
  <button id="next">Next</button>
</nav>
<section id="home" class="slide active">
  <div class="container">
    <p>1</p>
  </div>
</section>
<section id="aboutMe" class="slide">
  <div class="container">
    <p>2</p>
  </div>
</section>
<section id="smthElse" class="slide">
  <div class="container">
    <p>3</p>
  </div>
</section>

＆＃13;

在此之前，我尝试通过添加带有.css中定义的css的类并使其动画化（jquery ui），但效果或多或少相同。

我想要实现的只是我的部分的简单幻灯片功能。示例行为：http://codepen.io/jibbon/pen/BoisC

此外，我不是在寻找现成的解决方案，因为我需要尽可能简单的代码来学习和开发它。

谢谢你们！

Answer 1

您可以在代码中改进许多内容以实现您的目标。

首先，活动类设置为幻灯片但未应用任何特殊的CSS规则，因为您将position: absolute设置为div，您必须将z-index设置为重叠一个以上，初始化您的应用

这里有一个想法，如何实现你想要的东西：

https://jsfiddle.net/nz2hL6vn/1/

jQuery全屏部分向左滑动，向右滑动

1 个答案: