轮播图_div class banner-CSDN博客

本文链接：https://blog.csdn.net/sxj1995/article/details/51590995

一、是用js实现轮播图功能

通过for循环为所有图片和控制点添加class选择器变得不可见，为当前图片和控制点添加class选择器变得可见。

HTML文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<script src="js/jsmain.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="container">
			<div id="banner" class="banner">
				<ul class="picList" id="picList">
					<li class="show"><img src="img/indexjingxuan.jpg"/></li>
					<li class="hide"><img src="img/jijin.jpg"/></li>
					<li class="hide"><img src="img/top10.jpg"/></li>
				</ul>
				
				<!--快捷写法
					ul.pointList>li*3
				-->
				<ul class="pointList" id="pointList">
					<li class="active"></li>
					<li></li>
					<li></li>
				</ul>
				
				<a href="javascript:void(0)" class="prevBtn " id="prevBtn"></a>
				<a href="javascript:void(0)" class="nextBtn " id="nextBtn"></a>
			</div>
		</div>
	</body>
</html>

main.css:

*{padding: 0;margin: 0;}
ul li{
	list-style: none;
}
#container{
	width: 1240px;
	height: 388px;
	background-color: green;
	margin: 0 auto; /*水平居中*/
}
#banner{
	width: 1240px;
	height: 388px;
	overflow: hidden;  /*将容器之外的隐藏*/
	/*因为接下来的要相对于banner布局,所以父容器banner要相对定位*/
	position: relative;
}
/**
 * 图片列表
 */
#banner ul.picList{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
#banner ul.picList li{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
#banner ul.picList li img{
	width: 100%;
	height: 100%;
}
.show{
	display: block;
}
.hide{
	display: none;
}

/**
 * 控制点列表
 */
#banner ul.pointList{
	position: absolute;
	bottom: 30px;
	/*
	 * 接下来两句话是让容器水平居中
	 * 因为left: 50%;是从父容器左边缘距离子容器左边缘的50%
	 * 所以子容器还要向左移动自身的50%
	 */
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	z-index: 9999;
}
#banner ul.pointList li{
	display: inline-block;
	width: 12px;
	height: 12px;
	/*设置点的颜色*/
	background-color: #f66;
	/*将一个有宽高的容器变为圆的*/
	border-radius: 50%;
	/*设置两个点之间的距离*/
	margin-right: 10px;
	/*添加手势*/
	cursor: pointer;
}
#banner ul.pointList li.active{
	background-color: white;
}

/**
 * 左右控制按钮
 */
.prevBtn{
	width: 42px;
	height: 125px;
	position: absolute;
	left: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background: url(../img/prev.png) no-repeat center;
	z-index: 999;
}
.nextBtn{
	width: 42px;
	height: 125px;
	position: absolute;
	right: 0;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background: url(../img/next.png) no-repeat center;
	z-index: 999;
}

jsmain.js:

window.onload = function(){
	var banner = document.getElementById("banner");
	var picList = document.getElementById("picList");
	var picLis = picList.getElementsByTagName("li");
	var pointList = document.getElementById("pointList");
	var pointLis = pointList.getElementsByTagName("li");
	var len = picLis.length;
	var nextBtn = document.getElementById("nextBtn");
	var prevBtn = document.getElementById("prevBtn");
	
	
	/**
	 * 点击控制点切换图片
	 */
	for (var i = 0; i < len;i++) {
		pointLis[i].index = i;
		
		pointLis[i].onclick = function(){
			
			factory(this.index);
//			picLis[i].className = "show";
//			pointLis[i].className = "active";
		}
		activeIndex = this.index;
	}
	
	/**
	 * 点击左右按钮切换图片
	 */
//	表示当前是哪一张图片,默认的是第一张显示
	var activeIndex = 0;
	nextBtn.onclick = function(){
		activeIndex++;
		if(activeIndex >= len){
//			return; 如果达到最后一张后不想要图片进行切换,就跳出这段代码,(点击事件就此完成)
			activeIndex = 0;
		}
		factory(activeIndex);
	}
	prevBtn.onclick = function(){
		activeIndex--;
		if(activeIndex < 0){
			activeIndex = len-1;
		}
		factory(activeIndex);
	}
	
	/**
	 * 工厂方法，避免代码重复
	 * @param {Number} index
	 */
	function factory(index){
		for(var j = 0; j < len;j++){
				picLis[j].className = "hide";//通过循环将所有图片变得不可见
				pointLis[j].className = ""; //将所有的点的样式清空
			}
			picLis[index].className = "show"; //只显示当前图片
			pointLis[index].className = "active"; //只让当前点显示样式
	}
	
	
	/**
	 * 添加定时器
	 */
	var timer = "";
//	第一个参数为匿名函数，表名每隔两秒执行的代码，可以通过每隔2秒让代码点击一次下一个按钮来实现
	timer = setInterval(function(){
		nextBtn.onclick();
	},1000);
	
	/**
	 * 鼠标滑进滑出
	 */
//	onmouseenter:当鼠标滑进banner图中时,触发事件
	banner.onmouseenter = function(){
//		清除计时器,停留在当前图片
		clearInterval(timer);
	}
	banner.onmouseleave = function(){
//		重新启动计时器
		timer = setInterval(function(){
			nextBtn.onclick();
		},1000);
		
	}
	
}

2.jquery淡入淡出：

图片堆叠排放，需要通过z-index设置层级关系来调整图片的上下位置

通过将当前节点图片淡入、它的兄弟节点淡出让当前图片显示。为当前控制点节点添加名为active的class选择器、为它的兄弟节点移除class选择器来只让当前节点显示

HTML文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery淡入.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="container">
			<div id="banner" class="banner">
				<ul class="picList" id="picList">
					<li><img src="img/indexjingxuan.jpg"/></li>
					<li><img src="img/jijin.jpg"/></li>
					<li><img src="img/top10.jpg"/></li>
				</ul>
				
				<!--快捷写法
					ul.pointList>li*3
				-->
				<ul class="pointList" id="pointList">
					<li class="active"></li>
					<li></li>
					<li></li>
				</ul>
				
				<!--href="javascript:void(0)" >禁用了a链接的默认事件，但是有可点手势-->
				<a href="javascript:void(0)" class="prevBtn hide" id="prevBtn"></a>
				<a href="javascript:void(0)" class="nextBtn hide" id="nextBtn"></a>
			</div>
		</div>
	</body>
</html>

js文件：

$(function(){
	
	var $banner = $("#banner");
	var $picList = $("#picList");
	var $picLis = $("#picList li");
	var $pointList = $("#pointList");
	var $pointLis = $("#pointList li");
	var len = $pointLis.length;
	var $prevBtn = $("#prevBtn");
	var $nextBtn = $("#nextBtn");
	
	var activeIndex = 0;
	var timer = "";
	/**
	 * 先设置层级关xi，改变图片的上下顺序
	 */
	for (var i = 0;i < len;i++) {
		/**
		 * eq表示当前是di几个图片所在的li
		 * z-index表示我们设置每一个图片所在li的层级关xi(谁在谁的上面)
		 */
		$picLis.eq(i).css("z-index",len-i);
	}
	
	/**
	 * 点击控制点切换图片
	 */
	$pointLis.click(function(){
		var $index = $(this).index();
		activeIndex = $index;
		fadeFn($index);
	})
	
	/**
	 * 点击左右按钮切换图片
	 */
	$nextBtn.click(function(){
		activeIndex++;
		if(activeIndex >= len){
			activeIndex = 0;
		}
		fadeFn(activeIndex);
	})
	$prevBtn.click(function(){
		activeIndex--;
		if(activeIndex == 0 ){
			activeIndex = len-1;
		}
		fadeFn(activeIndex);
	})
	
	/**
	 * 
	 * @param {Number} num
	 */
	
	function fadeFn(num){
		$pointLis.eq(num).addClass("active").siblings().removeClass("active");
		$picLis.eq(num).fadeIn(1000).siblings().fadeOut(1000);
	}
	autoPlay()
	/**
	 * 定时器
	 */
	function autoPlay(){
		timer = setInterval(function(){
			$nextBtn.click();
		},1000);
	}
	
	$banner.mouseenter(function(){
		clearInterval(timer);
		$prevBtn.fadeIn();
		$nextBtn.fadeIn();
	})
	$banner.mouseleave(function(){
		autoPlay();
		$prevBtn.fadeOut();
		$nextBtn.fadeOut();
	})
	
	

	
	
});

3.jQuery动画实现：

图片左右排列

通过设置CSS属性来设置要点击图片和当前图片的位置，通过animate动画设置图片移动到的位置

HTML文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jQuery动画.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="container">
			<div id="banner" class="banner">
				<ul class="picList" id="picList">
					<li class="show"> <img src="img/indexjingxuan.jpg"/></li>
					<li class="hide"><img src="img/jijin.jpg"/></li>
					<li class="hide"><img src="img/top10.jpg"/></li>
				</ul>
				
				<!--快捷写法
					ul.pointList>li*3
				-->
				<ul class="pointList" id="pointList">
					<li class="active"></li>
					<li></li>
					<li></li>
				</ul>
				
				<!--href="javascript:void(0)" >禁用了a链接的默认事件，但是有可点手势-->
				<a href="javascript:void(0)" class="prevBtn hide" id="prevBtn"></a>
				<a href="javascript:void(0)" class="nextBtn hide" id="nextBtn"></a>
			</div>
		</div>
	</body>
</html>

js文件：

$(function(){
	
	var $banner = $("#banner");
	var $picList = $("#picList");
	var $picLis = $("#picList li");
	var $pointList = $("#pointList");
	var $pointLis = $("#pointList li");
	var len = $pointLis.length;
	var $prevBtn = $("#prevBtn");
	var $nextBtn = $("#nextBtn");
	
	var activeIndex = 0;
	var prevIndex = 0;
	var timer = "";
	
	$pointLis.click(function(){
		var $index = $(this).index();
		activeIndex = $index;
		
		if(activeIndex > prevIndex){
			//		将所点击的那张图片先移除掉hide，变得可见，并且同时把他放到di一张的最右边
//		然后他们一起向左滚动
		$picLis.eq(activeIndex).css("left","100%").removeClass("hide");
		
//		{}里面去写多个属性时，不能使用，隔开，要使用：
//		设置了两个图片所在li的运动轨迹、
//		使用了animate自定义动画
		$picLis.eq(prevIndex).animate({"left":"-100%"},400);
		$picLis.eq(activeIndex).animate({"left":"0%"},400);
//		设置控制点的样式
		$pointLis.eq(activeIndex).addClass("active").siblings().removeClass("active");
		}else if(activeIndex < prevIndex){
			$picLis.eq(activeIndex).css("left","-100%").removeClass("hide");
			$picLis.eq(prevIndex).animate({"left":"100%"},400);
			$picLis.eq(activeIndex).animate({"left":"0%"},400);
			$pointLis.eq(activeIndex).addClass("active").siblings().removeClass("active");
		} 
//		点击完成之后，上一次的那张图片的activeIndex就已经成为了prevIndex		
		prevIndex = activeIndex;
	})
	
	$nextBtn.click(function(){
		activeIndex++;
		if(activeIndex == len){
			activeIndex = 0;
		}
		$picLis.eq(activeIndex).css("left","100%").removeClass("hide");
		$picLis.eq(prevIndex).animate({"left":"-100%"},400);
		$picLis.eq(activeIndex).animate({"left":"0%"},400);
		$pointLis.eq(activeIndex).addClass("active").siblings().removeClass("active");
		
		prevIndex = activeIndex;
	})
	$prevBtn.click(function(){
		activeIndex--;
		if(activeIndex == -1){
			activeIndex = len-1;
		}
		$picLis.eq(activeIndex).css("left","-100%").removeClass("hide");
		$picLis.eq(prevIndex).animate({"left":"100%"},400);
		$picLis.eq(activeIndex).animate({"left":"0%"},400);
		$pointLis.eq(activeIndex).addClass("active").siblings().removeClass("active");
		
		prevIndex = activeIndex;
	})

	
	autoplay();
	function autoplay(){
		timer = setInterval(function(){
			$nextBtn.click();
		},2000)
	}
	
	$banner.mouseenter(function(){
		clearInterval(timer);
		$prevBtn.fadeIn();
		$nextBtn.fadeIn();
	})
	$banner.mouseleave(function(){
		autoplay();
		$prevBtn.fadeOut();
		$nextBtn.fadeOut();
	})

})