轮播图

Posted 薰衣草

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了轮播图相关的知识,希望对你有一定的参考价值。

一、是用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();
	)

)


以上是关于轮播图的主要内容,如果未能解决你的问题,请参考以下文章

js实现左右切换轮播图思路

用RecyclerView打造一个轮播图(进阶版)

如何用Bootstrap制作轮播图

使用vue实现轮播图

vue中的轮播图

CSS 轮播图的实现(纯CSS,连续滑动无倒滑效果)