我的java全栈开发之路-1-淡入淡出轮播图

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>1203600570-壮-淡入淡出轮播图</title>
	<style>
		*{margin: 0; padding: 0;}
		#container{
			position: relative;
			width: 850px;
			height: 450px;
			margin: 50px auto;
		}
		a img{
			position: absolute;
			width: 850px;
			height: 450px;
			vertical-align: top;
		}
		a{
			opacity: 0;
			transition: .5s;
		}
		a.on{
			opacity: 1;
		}
		.dot p{
			width: 30px;
			height: 30px;
			background:#ccc;
			color: #fff;
			font:20px/30px '';
			box-shadow: 1px 1px 10px #000;
			text-align: center;
			border-radius: 50%;
			cursor: pointer;
		}
		/*dot*/
		#container .dot{
			position: absolute;
			left: calc(50% - 100px);
			display: flex;
			justify-content: space-between;
			bottom: 5px;
			width: 200px;
			height: 30px;
		}
		#container .dot p.on{
			background-color: red;
		}
		.btn p{
			position: absolute;
			width: 55px;
			height: 55px;
			top: 50%;
			margin-top: -27px;
			background-color: rgba(0,0,0,.5);
			cursor: pointer;
		}
		.btn p img{
			width: 55px;
			height: 55px;
		}
		.btn p:nth-child(1){
			left: 0;
		}
		.btn p:nth-child(2){
			right: 0;
		}
	</style>
</head>
<body>
	<div id="container">
		<div>
			<a href="#" class="on"><img src="images/0.jpg"></a>
			<a href="#"><img src="images/1.jpg"></a>
			<a href="#"><img src="images/2.jpg"></a>
			<a href="#"><img src="images/3.jpg"></a>
			<a href="#"><img src="images/4.jpg"></a>
		</div>
		<div class="btn">
			<p><img src="images/next1.png"></p>
			<p><img src="images/next2.png"></p>
		</div>
		<div class="dot">
			<p class="on">1</p>
			<p>2</p>
			<p>3</p>
			<p>4</p>
			<p>5</p>
		</div>
	</div>
	<script>
		var oBox = document.getElementById("container");
		var aBot = document.querySelectorAll(".dot p");  //获取圆点数组
		var aImg = document.querySelectorAll("a");       //获取图片数组
		var aBtn = document.querySelectorAll(".btn p");
		var imgLength = aImg.length;
		var index = 0;     //索引
		/*btn*/
		aBtn[1].onclick = next;
		aBtn[0].onclick = function(){
			aImg[index].className = "";
			index > 0 ? index-- : index = imgLength-1;
			aImg[index].className = "on";
			change();
		}
		/*自动轮换*/
		var timer = setInterval(next,2000);
		function next(){
			aImg[index].className = "";
			index < imgLength-1 ? index++ : index = 0;
			aImg[index].className = "on";
			change();
		}
		/*鼠标移入移出*/
		oBox.onmouseenter = function(){
			clearInterval(timer);
		}
		oBox.onmouseleave = function(){
			timer = setInterval(next,2000);
		}
		/*圆点点击事件*/
		for (var i = 0; i < imgLength; i++) {
			(function(m){
				aBot[m].onclick = function(){
					aImg[index].className = "";
					index = m;
					aImg[index].className = "on";
					change();
				}
			}
				)(i)
		}
		/*圆点变色*/
		function change(){
			for(var i = 0;i < imgLength;i++){
				aBot[i].className = "";
			}
			aBot[index].className = "on";
		}
	</script>
</body>
</html>
我的java全栈开发之路-1-淡入淡出轮播图

猜你喜欢
