干蹦轮播

原文: 干蹦轮播

本人录制技术视频地址：https://edu.csdn.net/lecturer/1899 欢迎观看。

这一节，继续介绍JQuery动画特效：干蹦轮播。效果图如下：

看起来这效果和我前几节介绍的传统轮播效果类似。

之所以要介绍这个动画，主要是为了给出设计思路。

在传统轮播中，设计思路是将很多张图片一排显示，然后通过绝对定位，改变图片的left值。

而这节介绍的干蹦轮播，所有的图片放置在一个UI包装的li中，有且仅有一张图片显示，其余的都隐藏。

由于干蹦轮播的代码大多数与传统轮播类似，所以我只会列出主要的设计代码。

一、设计的html架构：

<body>
	<div id="container">
		<ul id="content">
			<li class="current"><a href="#"><img src="images/0.jpg" alt="One"/></a></li>
			<li><a href="#"><img src="images/1.jpg" alt="Two" /></a></li>
			<li><a href="#"><img src="images/2.jpg" alt="Three" /></a></li>
			<li><a href="#"><img src="images/3.jpg" alt="Four" /></a></li>
			<li><a href="#"><img src="images/4.jpg" alt="Five" /></a></li>
		</ul>
		<div id="btn">
			<div id="leftBtn"></div>
			<div id="rightBtn"></div>
		</div>
		<div id="bar">
			<div id="title">One</div>
			<ul id="indicator">
				<li class="current"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>

	</div>
</body>

注意到标签li有一个current的class，它表示这个li会显示出来，而其余的li会隐藏。

二、设计的css主要代码：

#container
{
	width:560px;
	height: 300px;
	margin: 100px auto;
	position: relative;
	overflow: hidden;
}

#container #content
{
	list-style: none;
}

#container #content li
{
	display: none;
}

#container #content li img
{
	border: 0;
}

#container #content li.current
{
	display: block;
}

三、js代码：

var nowImg = 0;

$(function(){

	var interval = setInterval(rightFun	, 1000);

	$("#container").mouseenter(function(){
		clearInterval(interval);
	}).mouseleave(function() {
		interval = setInterval(rightFun	, 1000);
	});;

	$("#container #btn #leftBtn").click(function(){
		if(nowImg<=0){
			nowImg = $("#container #content li").length - 1;
		}
		else{
			nowImg--;
		}

		changeImage(nowImg);
	});

	$("#container #btn #rightBtn").click(rightFun);

	$("#container #indicator li").mouseenter(function(){
		nowImg = $(this).index();
		changeImage(nowImg);
	});
});

	function rightFun(){
		if(nowImg >= $("#container #content li").length - 1){
			nowImg = 0;
		}
		else{
			nowImg++;
		}

		changeImage(nowImg);
	}


	function changeImage(index){
		$("#container #content li").eq(index).addClass("current").siblings().removeClass("current");

		$("#container #indicator li").eq(index).addClass("current").siblings().removeClass("current");

		var title = $("#container #content li img").eq(index).attr("alt");
		$("#container #bar #title").html(title);
	}

代码的精华部分就是 changeImage这个方法。将下一个图片（即下一个li）添加current，即显示；同时将兄弟li的节点全部移除掉current，即将他们隐藏。

猜你喜欢