javascript - 不使用动画的 HTML/JS 轮播

Question

我一直在尝试构建自定义 slider ，但目前遇到了困难。所以目前它使用 css 来制作动画。但是我可以倒退但没有动画。我相信我需要循环播放幻灯片，也许尝试一种不同的方法，但我目前正在努力。

我已经厌倦了通过将 .active 类添加到加载的第一篇文章然后使用 jquery 索引函数来设置 current_slide 但没有成功。此外，我不熟悉“ Prop :”语法，谷歌也不是很有帮助。再次感谢任何帮助

"use strict";

(function() {

	var carouselWidth = $('.carousel-cells').width();
	var Carousel = {
		props:{
			current_slide:null,
			total_slides:null
		},
		init:function(){
			//ADD INITIALIZER CODE HERE
			Carousel.bindEvents();
			$('.carousel-cells').css({marginLeft: -carouselWidth});
			$('article:first-child').addClass("show");
		},
		bindEvents:function(){
			$(".carousel-next").on("click",function(){
				Carousel.next();
			});
			$(".carousel-prev").on("click",function(){
				Carousel.previous();
			});
			$(document).keydown(function(e) {
				var key = e.which;
				if (key===37) Carousel.previous();
				if (key===39) Carousel.next();
			});
		},
		next:function(){
			//ADD NEXT CODE HERE
			Carousel.update();
			$('article:first-child').appendTo('.carousel-cells');
			$('article:first-child').addClass("show");
		},
		previous:function(){
			//ADD PREVIOUS CODE HERE
			Carousel.update();
			$('article:last-child').prependTo('.carousel-cells');
			$('article:last-child').addClass("show-prev");
			$('article:first-child').addClass("margin-reset");
		},
		update:function(){
			//ADD UPDATE CODE HERE
			$('article').removeClass("show");
			$('article').removeClass("show-prev");
		}
	}
	$(function(){
		Carousel.init();
	})

})(window);

body{
	background-color:#e2e2e2;
}
header{
	width:100%;
	position:fixed;
	height:50px;
	background-color:#ccc;
	overflow:hidden;
	z-index:2;
	box-sizing:border-box;
}
header h2 {
	font-size: 28px;
	margin: 13px 10px;
}
header nav  {
	float: right;
}
header nav ul {
	margin: 10px 10px;
}
header nav li {
	background-color: #e2e2e2;
	display: inline-block;
	padding: 5px;
}

.page-content{
	padding-top:50px;
}

.page-content .main-carousel{
	width:100vw;
	height:400px;
	overflow:hidden;
	position:relative;
	z-index:1;
}

.page-content .main-carousel .carousel-next,
.page-content .main-carousel .carousel-prev{
	position:absolute;
	top:50%;
	padding:20px;
	background-color:rgba(200,200,200,1);
	cursor:pointer;
	margin-top:-25px;
}

.page-content .main-carousel .carousel-next{
	right:0;
}

.page-content .main-carousel .carousel-prev{
	left:0;
}

.page-content .main-carousel .carousel-cells {
	width:99999px;
	height:100%;
	margin-left: 0%;
	-webkit-transition: 1s all ease;
	transition: 1s all ease;
}
.page-content .main-carousel .carousel-cells .show {
	margin-left: 0%;
	-webkit-transition: .6s all ease-in;
	transition: .6s all ease;
}
.page-content .main-carousel .carousel-cells article .show {
	margin-left: 0%;
	-webkit-transition: .6s all ease-in;
	transition: .6s all ease;
}
.page-content .main-carousel .carousel-cells article .margin-reset {
	margin-left: 100%;
	display: none;
}

.page-content .main-carousel .carousel-cells article .show-prev {
	margin-left: 0%;
	-webkit-transition: .6s all ease-in;
	transition: .6s all ease;
}

.page-content .main-carousel .carousel-cells article{
	width:100vw;
	height:100%;
	float:left;
	display:flex;
	-webkit-transition: .8s all ease-in;
	transition: .8s all ease-in;
	background-image: url("../img/slide-background.jpg");
}

.page-content .main-carousel .carousel-cells article + article {
	margin-left: 100%;
}

.page-content .main-carousel .carousel-cells article .slide-text {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
}
.column-content {
	background-color: #f0f0f0;
	padding: 33px 18px 40px;
}
.column-content h1 {
	font-size: 24px;
	margin-bottom: 26px;
}

.three-columns {
	column-count: 4;
	-webkit-column-count: 4;
	column-gap: 55px;
	-webkit-column-gap: 55px;
	column-fill: balance;
}

.three-columns .list-block {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

.three-columns h1 {
	font-size: 24px;
}

.three-columns .list-block h3 {
	margin-bottom: 25px;
}

.three-columns .list-block ul {
	list-style: none;
	display: inline-block;;
}

@media screen and (max-width: 768px) {
	.three-columns {
		column-count: 3;
		-webkit-column-count: 3;
		column-gap: 15px;
		-webkit-column-gap: 20px;
		-webkit-column-break-inside: avoid;
	}
	.three-columns .list-block {
		break-inside: avoid;
		-webkit-column-break-inside: avoid;
	}
	.three-columns .list-block ul {
		min-height: 50px;
	}
}

<!doctype html>
<html>
	<head>

		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>Test</title>

		<link rel="stylesheet" type="text/css" href="inc/css/reset.css" />
		<link rel="stylesheet" type="text/css" href="inc/css/base.css" />

		<script src="inc/js/vendor/jquery.min.js"></script>
		<script src="inc/js/base.js"></script>

	</head>
	<body>
		<header>
			<nav>
				<ul>
					<li>One</li>
					<li>Two</li>
					<li>Three</li>
					<li>Four</li>
				</ul>
			</nav>
			<h2 class="logo">LOGO</h2>
		</header>
		<div class="page-content">
			<section class="main-carousel">
				<div class="carousel-next">&gt;</div>
				<div class="carousel-prev">&lt;</div>
				<div class="carousel-cells">
					<article>
						<div class="slide-text">
							<h1>Slide One</h1>
							<p>A slide about sliding slides.</p>
						</div>
					</article>
					<article>
						<div class="slide-text">
							<h1>Slide Two</h1>
							<p>A slide-sliding slider sliding slides.</p>
						</div>
					</article>
					<article>
						<div class="slide-text">
							<h1>Slide Three</h1>
							<p>A slide-sliding slider sliding slides.</p>
						</div>
					</article>
				</div>
			</section>
			<section class="column-content">
				<h1>Three Columns</h1>
				<div class="three-columns">
					<aside class="list-block">
						<h3>List Heading</h3>
						<ul>
							<li>List Item</li>
							<li>List Item</li>
							<li>List Item</li>
							<li>List Item</li>
							<li>List Item</li>
						</ul>
					</aside>
					<aside class="list-block">
						<h3>List Heading</h3>
						<ul>
							<li>List Item</li>
							<li>List Item</li>
							<li>List Item</li>
							<li>List Item</li>
							<li>List Item</li>
						</ul>
					</aside>
					<aside class="list-block">
						<h3>List Heading</h3>
						<ul>
							<li>List Item</li>
							<li>List Item</li>
						</ul>
					</aside>
					<aside class="list-block">
						<h3>List Heading</h3>
						<ul>
							<li>List Item</li>
							<li>List Item</li>
							<li>List Item</li>
						</ul>
					</aside>
				</div>
			</section>
		</div>

	</body>

</html>

Answer 1

尝试查看这个 fiddle :http://jsfiddle.net/YFgAM/

$('.block-13 .show-more.prev').click(function () {

    var last = $('.block-13 .list li:last-child');

    last.remove();

    $('.block-13 .list').filter(':not(:animated)').prepend(last);

    $('.block-13 .list').filter(':not(:animated)').css({
        right: '+=' + width
    });

    $('.block-13 .list').filter(':not(:animated)').animate({
        right: '-=' + width
    });

});

您可以在动画开始之前添加元素(在您的例子中，它是“.carousel-prev”)。