用js和jQuery做轮播图

Javascript或jQuery做轮播图

css样式

<style>
a{
text-decoration:none;
}
.naver{
width: 100%;
position:relative;
}

.images{
	position:relative;
	width: 100%;
	height: 400px;
}
.images img{
	position:absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 400px;
	opacity: 0;
	filter:alpha(opacity=0);
	transition:opacity .5s;
}
/*图片切换之前有渐变的效果*/
.images img.current{
	opacity:1;
	filter:alpha(opacity=100);
}
.icon-list{
	position:absolute;
	left:43%;
	bottom:30px;
	z-index:1;
	width: 200px;
	border-radius:30px;
	height:35px;
	background-color:hsla(0,0%,100%,.4);
}
.icon-list span{
	display:inline-block;
	width: 20px;
	height: 20px;
	background-color:#fff;
	border-radius:50%;
	margin:8px 12px;
}
.icon-list span.current{
	background:pink;
}
.icon a{
	position:absolute;
	top:50%;
	display:block;
	width: 40px;
	height: 40px;
	line-height:40px;
	text-align:center;
	color:rgba(255,255,255,.4);
	filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66ffffff,endcolorstr=#66ffffff);
	background:rgba(0,0,0,.4);
	filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66000000,endcolorstr=#66000000);
	font-size:36px;
	font-weight:bold;
}
.icon a:hover{
	color:rgba(255,255,255,.8);
	filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#c8ffffff,endcolorstr=#c8ffffff);
	background:rgba(0,0,0,.8);
	filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#c8000000,endcolorstr=#c8000000);
	/*为了让IE兼容rgba*/
}
.icon a#prev{
	left:10px;
}
.icon a#next{
	right:10px;
}

HTML部分

<div class="naver clear">
	<div class="images">
		<img src="./images/01.jpg" class="current" >
		<img src="./images/02.jpg" alt="" >
		<img src="./images/03.jpg" alt="" >
		<img src="./images/04.png" alt="" >
	</div>
	<div class="icon-list">
		<span class="current" index="0"></span>
		<span index="1"></span>
		<span index="2"></span>
		<span index="3"></span>
	</div>
	<div class="icon">
		<a href="#" id="prev">&lt;</a>
		<a href="#" id="next">&gt;</a>
	</div>
</div>

JavaScript设置

<script>
	//获取响应的元素
	var naver = document.querySelector(".naver");
	var iconList = document.querySelectorAll(".icon-list span");
	var prev = document.querySelector("#prev");
	var next = document.querySelector("#next");

	//定义循环变量
	var m = 1;

	//定时函数
	function runPlay(){
		if (m > 3) {
			m = 0;
		}

		controlImage(m)

		m ++;
	}

	var timer = setInterval(runPlay, 3000);


	//滑过轮播图，定时停止
	naver.onmouseover = function(){
		clearInterval(timer);

		//显示按钮
		prev.style.display = "block";
		next.style.display = "block";
	}

	naver.onmouseout = function(){
		timer = setInterval(runPlay, 3000);

		//隐藏按钮
		prev.style.display = "none";
		next.style.display = "none";
	}

	//被每一个 控制按钮绑定 鼠标滑过 事件
	for (var i = 0; i < iconList.length; i ++) {
		iconList[i].onmouseover = function(){
			var index = parseInt(this.getAttribute("index"));
			controlImage(index);

			m = index + 1;

		}
	}


	//点击向右的按钮
	next.onclick = function(){
		if (m > 3) {
			m = 0;
		}

		controlImage(m);
		m ++;
	}


	//点击向左的按钮
	prev.onclick = function(){
		m -= 2;
		if (m < 0) {
			m = 3;
		}
		controlImage(m);
		m ++;
	}

	//控制图片的变化
	function controlImage(n){
		//获取所有a的集合
		var aImgs = document.querySelectorAll(".images img");
		

		//所有的a删除类， 第n个添加类
		for (var i = 0; i < aImgs.length; i ++) {
			aImgs[i].className = "";
			iconList[i].className = "";
		}
		aImgs[n].className = "current";
		iconList[n].className = "current";

	}
</script>

jQuery部分

<!-- 兼容IE8以上的 -->
<!--[if gt IE 8]><!-->
<script src="./js/jquery-3.2.1.min.js"></script>
<!--<![endif]-->

<!-- 兼容包括IE8以下的浏览器 -->
<!--[if lte IE 8]>
<script src="./js/jquery-1.12.4.min.js"></script>
<![endif]-->


<script>
	// 设置轮播图样式
$(function(){
	//定义循环变量
	var m=1;
	//定时函数
	function runPlay(){
		if(m > 3){
			m=0;
		}
		controlImage(m);
		m++;
	}
	var timer=setInterval(runPlay,3000);
	//滑过轮播图，定时停止，离开定时继续
	$(".naver").mouseenter(function(){
		clearInterval(timer);
		//显示按钮
		prev.style.display="block";
		next.style.display="block";
	}).mouseleave(function(){
		timer=setInterval(runPlay,3000);
		//隐藏按钮
		prev.style.display="none";
		next.style.display="none";
	})

	//点击向下的按钮
	$("#next").click(function(){
		if(m > 3){
			m=0;
		}
		controlImage(m);
		m++;
	})

	//点击向上的按钮
	$("#prev").click(function(){
		m-=2;
		if(m < 0){
			m=3;
		}
		controlImage(m);
		m++;
	})

	$(".icon-list span").mouseenter(function(){
		controlImage($(this).index());
		m = $(this).index() + 1;
	})

	//控制图片的变化
	function controlImage(n){
		$(".images img").removeClass("current").eq(n).addClass("current");
		$(".icon-list span").removeClass("current").eq(n).addClass("current");
	}
})


</script>