在点击时添加 li 元素的响应式轮播答案

【问题标题】：Responsive carousal that adds li elements on click在点击时添加 li 元素的响应式轮播
【发布时间】：2016-10-05 23:21:21
【问题描述】：

我正在尝试创建一种显示日期的滑动轮播（放大的日历视图）。在轮播中显示三个列表元素（昨天的日期、今天的日期、明天的日期）。当您单击“下一个”按钮时，它会按顺序滑动（带有过渡）到下一个日期，当您单击“上一个”按钮时，它会按顺序显示上一个日期。

我将三个列表元素设置为 100% 容器中的 33.2%，因此我不确定在单击按钮时在何处添加“下一个”和“上一个”列表元素。如果我以像素为单位做这一切会更简单，因为我可以将每个添加的元素并排放置在画布上，但我使用的是百分比。另外，由于日期数字逐月变化，我必须通过 js 添加列表项。

var date = new Date();
	var day  = date.getDate();
	
	$(".yesterday p").text(day - 1);
	$(".today p").text(day);
	$(".tomorrow p").text(day + 1);

*{
	margin:0;
	padding:0;
}

.calender{
	width:100%;
	height:500px;
  margin-top:5px;
	border: 1px black solid;
	position:relative;
}

.day{
	width: 33%;
	height:500px;
	border: 1px red solid;
	float:left;
	position:relative;
	
}

.day p{
	text-align:center;
	font-size:6em;
}

.next{
	position:absolute;
	top:0;
	right:0;
	width:25px;
	height:100%;
	background-color:green;
	cursor:pointer;
}

.next:hover{
	background-color:red;
}

.prev{
	position:absolute;
	top:0;
	left:0;
	width:25px;
	height:100%;
	background-color:green;
	cursor:pointer;
}

.prev:hover{
	background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

	<ul class="calender"> <!-- zoomed in cal -->
		
		<li class="day yesterday"> <p></p> </li>
		<li class="day today"> <p></p> </li>
		<li class="day tomorrow"> <p></p> </li>
		
	
		
	</ul>
		<li class="next"></li>
		<li class="prev"></li>

</body>

【问题讨论】：

标签： jquery html css date css-animations

【解决方案1】：

我想通了。我将列表更改为内联块而不是浮动。我还在页面加载时添加了所有列表元素（日期），而不是每次单击时一次添加一个。

	var d = new Date();
	var month = d.getMonth()+1;
	var year = d.getFullYear();
	var day  = d.getDate();
	
	var getDaysInMonth = function(month,year) {  
		return new Date(year, month, 0).getDate();
	}

	var count = 0;
    var slide = 33 * (day - 2);

	for (x=0; x < getDaysInMonth(month, year); x++)
	{
		count += 1;
		$(".calender").append("<li class='day "+count+"'><p>"+count+"</p></li>");
		$(".1").css("margin-left","-"+slide+"%");
	}
	
	var next = 0;
	
	$(".next").click(function(){
	
		next  += 1;
		slide += 33;
		$(".1").animate({marginLeft: '-'+slide+'%'}, "fast");
	});
	
	var prev = 0;
	
	$(".prev").click(function(){
		
		if (slide > 0)
		{
			prev  += 1;
			slide -= 33;
			$(".1").animate({marginLeft: '-'+slide+'%'}, "fast");
		}
	});

*{
	margin:0;
	padding:0;
	overflow-x:hidden;
	overflow-y:hidden;
}

.calender{
	width:100%;
	height:50vh;
	border: 1px #FFF solid;
	margin-top:20px;
	position:relative;
	white-space: nowrap;
	font-family: 'Lato';
	color:#FFF;
}

.day{
	width: 33%;
	height:50vh;
	border: 1px #FFF solid;
	display: inline-block;
	position:relative;
	background-color:#35a541;
}

.day p{
	text-align:center;
	font-size:6em;
}

.next{
	position:absolute;
	top:0;
	right:0;
	width:25px;
	height:100%;
	background-color:green;
	cursor:pointer;
}

.next:hover{
	background-color:red;
}

.prev{
	position:absolute;
	top:0;
	left:0;
	width:25px;
	height:100%;
	background-color:green;
	cursor:pointer;
}

.next:hover{
	background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	<script src='code/jquery-1.12.2.min.js'></script>
	<script src="code.js"></script>
	<link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
	<ul class="calender"> <!-- zoomed in cal -->
	
		
	</ul>
		<li class="next"></li>
		<li class="prev"></li>

</body>

</html>

【讨论】：