JQ做的一个焦点图特效

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery焦点图</title>

<style type="text/css">
.box{
	margin-top: 300px;
	width: 100%;
	height: 340px;
	position: relative;
}
.list{
	width: 800px;
	height: 300px;
	overflow: hidden;
	position: absolute;
	left: 25%;
}
.poster{
	position: absolute;
	top: 0;
	left: 100px;
	list-style: none;
	opacity: 0;
	transition: all 0.3s ease-out;
}
.poster>img{
	width: 247px;
	height: 179px;
	border:none;
	float: left;
}
.p1{
	transform:translate3d(-100px,0,0) scale(0.81);
	transform-origin:0 25%;
	opacity: 0.6;
	z-index: 1;	
}
.p2{
	transform:translate3d(0px,0,0) scale(0.81);
	transform-origin:0 50%;
	opacity: 0.8;
	z-index: 2;
}
.p3{
	transform:translate3d(100px,0,0) scale(1);
	z-index: 3;
	opacity: 1;
}
.p4{
	transform:translate3d(200px,0,0) scale(0.81);
	transform-origin:100% 50%;
	opacity: 0.8;
	z-index: 2;
}
.p5{
	transform:translate3d(300px,0,0) scale(0.81);
	transform-origin:100% 25%;
	opacity: 0.6;
	z-index: 1;		
}

</style>

</head>
<body>

		<div class="box">

			<div class="list">
				<ul class="poster-list">
					<li class="poster p5"><a href="#"></a><img src="img/xs_img1_03.jpg" alt="" /></li>
					<li class="poster p4"><a href="#"></a><img src="img/xs_img2_03.jpg" alt="" /></li>
					<li class="poster p3"><a href="#"></a><img src="img/xs_img3_03.jpg" alt="" /></li>
					<li class="poster p2"><a href="#"></a><img src="img/xs_img4_03.jpg" alt="" /></li>
					<li class="poster p1"><a href="#"></a><img src="img/xs_img5_03.jpg" alt="" /></li>
				</ul>
			</div>
	
<!-- 	<a href="javascript:;" class="prev btn"><</a>
	<a href="javascript:;" class="next btn">></a> -->

<!-- 	<div class="buttons">
		<a href="javascript:;"><span class="blue"></span></a>
		<a href="javascript:;"><span></span></a>
		<a href="javascript:;"><span></span></a>
		<a href="javascript:;"><span></span></a>
		<a href="javascript:;"><span></span></a>
		<a href="javascript:;"><span></span></a>
		<a href="javascript:;"><span></span></a>
	</div> -->
		</div>

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
var $a=$(".buttons a");
var $s=$(".buttons span");
var cArr=["poster p5","poster p4","poster p3","poster p2","poster p1"];
var index=0;
$(".next").click(
	function(){
	nextimg();
	}
)
$(".prev").click(
	function(){
	previmg();
	}
)
//上一张
function previmg(){
	cArr.unshift(cArr[4]);
	cArr.pop();
	//i是元素的索引，从0开始
	//e为当前处理的元素
	//each循环，当前处理的元素移除所有的class，然后添加数组索引i的class
	$(".poster-list li").each(function(i,e){
		$(e).removeClass().addClass(cArr[i]);
	})
	index--;
	if (index<0) {
		index=4;
	}
	show();
}

//下一张
function nextimg(){
	cArr.push(cArr[0]);
	cArr.shift();
	$(".poster-list li").each(function(i,e){
		$(e).removeClass().addClass(cArr[i]);
	})
	index++;
	if (index>4) {
		index=0;
	}

}

//通过底下按钮点击切换
$a.each(function(){
	$(this).click(function(){
		var myindex=$(this).index();
		var b=myindex-index;
		if(b==0){
			return;
		}
		else if(b>0) {
			/*
			 * splice(0,b)的意思是从索引0开始,取出数量为b的数组
			 * 因为每次点击之后数组都被改变了,所以当前显示的这个照片的索引才是0
			 * 所以取出从索引0到b的数组,就是从原本的这个照片到需要点击的照片的数组
			 * 这时候原本的数组也将这部分数组进行移除了
			 * 再把移除的数组添加的原本的数组的后面
			 */
			var newarr=cArr.splice(0,b);
			cArr=$.merge(cArr,newarr);
			$(".poster-list li").each(function(i,e){
			$(e).removeClass().addClass(cArr[i]);
			})
			index=myindex;

		}
		else if(b<0){
			/*
			 * 因为b<0,所以取数组的时候是倒序来取的,也就是说我们可以先把数组的顺序颠倒一下
			 * 而b现在是负值,所以取出索引0到-b即为需要取出的数组
			 * 也就是从原本的照片到需要点击的照片的数组
			 * 然后将原本的数组跟取出的数组进行拼接
			 * 再次倒序,使原本的倒序变为正序
			 */
			cArr.reverse();
			var oldarr=cArr.splice(0,-b)
			cArr=$.merge(cArr,oldarr);
			cArr.reverse();
			$(".poster-list li").each(function(i,e){
			$(e).removeClass().addClass(cArr[i]);
			})
			index=myindex;
			show();
		}
	})
})




//			鼠标移入box时清除定时器
$(".poster").mouseover(function(){
	clearInterval(timer);
})

//			鼠标移出box时开始定时器
$(".poster").mouseleave(function(){
	timer=setInterval(nextimg,1000);
})

//			进入页面自动开始定时器
timer=setInterval(nextimg,1000);
</script>

</body>
</html>
JQ做的一个焦点图特效

猜你喜欢
