灵活轮播图（append 、clone小解）

当我们前后端交互的时候，我们写的轮播图要灵活一点。当我们写滑动形式的轮播图时，最后面往往要加上若干个代码块和前几个相同，以此达到轮播图最后一张到第一张的过渡。
以这个为例
在这里插入图片描述
这是6个图片，但是我们要最后再加上4个已完成过渡

以往像这种我会直接在html里面写10个

但是前后端交互的时候，a标签的数量都时后端遍历传过来的。所以最后四个我们应该用js来解决。
这时候我们就会想到js中的appendChild或者jQuery中的append方法，但是如果我们直接这样添加的话，只会把前四个转移到最后四个的位置，只是调换了位置，并没有实现了添加的效果。

$(".carousel_box>a").eq(3).appendTo($(".carousel_box"))

这时候我们应该用js先复制一下a代码块，再添加
js：

	var a=document.getElementsByClassName("carousel_box")[0];
	var c=a.getElementsByTagName("a")[3];
	var e=c.cloneNode(true);
	a.appendChild(e);

jQuery：

$(".carousel_box>a").eq(3).clone().appendTo($(".carousel_box"))

整个轮播图的代码如下，欢迎各位大佬提出意见、建议和错误

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>carousel</title>
		<link rel="stylesheet" type="text/css" href="css/carousel.css"/>
	</head>
	<body>
		<div class="carousel">
			<div class="carousel_contain">
				<div class="carousel_box">
					<a href="javascript:;" target="_blank">
						<img src="img/S1.jpg"/>
						<div class="names">
							<h3 class="name_">1</h3>
							<h4 class="grade_"></h4>	
						</div>
					</a>
					<a href="javascript:;" target="_blank">
						<img src="img/S1.jpg"/>
						<div class="names">
							<h3 class="name_">2</h3>
							<h4 class="grade_"></h4>	
						</div>
					</a>
					<a href="javascript:;" target="_blank">
						<img src="img/S1.jpg"/>
						<div class="names">
							<h3 class="name_">3</h3>
							<h4 class="grade_"></h4>	
						</div>
					</a>
					<a href="javascript:;" target="_blank">
						<img src="img/S1.jpg"/>
						<div class="names">
							<h3 class="name_">4</h3>
							<h4 class="grade_"></h4>	
						</div>
					</a>
					<a href="javascript:;" target="_blank">
						<img src="img/S1.jpg"/>
						<div class="names">
							<h3 class="name_">5</h3>
							<h4 class="grade_"></h4>	
						</div>
					</a>
					<a href="javascript:;" target="_blank">
						<img src="img/S1.jpg"/>
						<div class="names">
							<h3 class="name_">6</h3>
							<h4 class="grade_"></h4>	
						</div>
					</a>
				</div>
			</div>
			<ul class="switchable_triggers">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
	<script src="js/jquery-1.12.4.min.js"></script>
	<script src="js/carousel.js"></script>
</html>

*{
	box-sizing: border-box;
	margin: 0;
    padding: 0;
}
.carousel{
	position: relative;
	height: 374px;
}
.carousel_contain{
	clear: both;
    position: relative;
    overflow: hidden;
    margin: 0;
    height: 333px;
    width: 1200px;
    margin: 0 auto;
}
.carousel_box{
	position: absolute;
    /*left: -1168px;*/
    width: 17520px;
    transition-property: none;
    transition-duration: 500ms;
    transition-timing-function: ease-in-out;
}
.carousel_box a{
	float: left;
    margin: 2px 8px;
  	height: 327px;
    width: 284px;
    display: inline;
    text-align: center;
    background: #f7f7f7;
    box-shadow: 0 0 2px 2px #e0dfdf;
    background-image: url(../img/home_poeple_bg.png);
}
.carousel_box a img{
	height: 185px;
    display: block;
    margin: 14px auto 5px;
    padding: 3px;
    box-sizing: border-box;
    transition: all 0.3s;
    box-shadow: 0 0 3px 3px #ddd;
}
.switchable_triggers{
	display: block;
	height:20px;
	text-align: center;
}
.switchable_triggers li{
	display: inline-block;
    width: 17px;
    height: 6px;
    margin: 10px 3px 0 0;
    font-size: 0px;
    background: url(../img/navigator.png) -80px -10px no-repeat;
    outline: none;
    overflow: hidden;
    float: left;
}
.switchable_triggers li:nth-child(1){
	background: url(../img/navigator.png) -80px 0px no-repeat;
}

$(function(){
	var width_=$(".switchable_triggers>li").length*20+"px";
	$(".switchable_triggers").css("width",width_);
	$(".switchable_triggers").css("margin","0 auto")
	var storage=$("carousel_box>a");
	for (var i = 0; i <4; i++) {
		$(".carousel_box>a").eq(i).clone().appendTo($(".carousel_box"))
	}
	
	var current_index = 0;
	var total = $(".carousel_box>a").length-4;
	function carousel_play(){
		current_index++;
		if(current_index == total){
			$(".switchable_triggers>li").eq(0).css("background-position","-80px 0px");
			$(".switchable_triggers>li").eq(0).siblings().css("background-position","-80px -10px");
		}
		if(current_index > total) {
			$(".carousel_box").css({
				marginLeft: 0
			});
			current_index = 1;
		}
		$(".carousel_box").stop().animate({
			marginLeft: -300 * current_index + "px"
		}, 500);
		$(".switchable_triggers>li").eq(current_index).css("background-position","-80px 0px");
		$(".switchable_triggers>li").eq(current_index).siblings().css("background-position","-80px -10px");
	}
	var timer=setInterval(carousel_play,2000)
	$(".switchable_triggers>li").hover(function(){
		switchable_triggers_index=$(this).index();
		clearInterval(timer);
		current_index=switchable_triggers_index-1;
		carousel_play();
	},function(){
		timer=setInterval(carousel_play,2000);
	})
	$(".carousel").mousemove(function(){
		clearInterval(timer);
	});
	$(".carousel").mouseleave(function(){
		timer=setInterval(carousel_play,2000);
	})
});

灵活轮播图（append 、clone小解）

猜你喜欢