Code block (1) - case of carousel

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.wrap{
				width: 800px;
				height: 400px;
				position: relative;
			}
			.list{
				width: 800px;
				height: 400px;
				list-style: none;
				position: relative;
				padding-left: 0px;
			}
			.item{
				width: 100%;
				height: 100%;
				color: white;
				font-size: 50px;
				position: absolute;
				opacity: 0;
				transition: all .8s;
			}
			.item:nth-child(1){
				background-image: url(img/docter_home.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			.item:nth-child(2){
				background-color: red;
			}
			.item:nth-child(3){
				background-image: url(img/icon-lunbo.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
			}
			.item:nth-child(4){
				background-color: green;
			}
			.item:nth-child(5){
				background-color: pink;
			}
			.btn{
				width: 50px;
				height: 100px;
				position: absolute;
				top: 150px;
				z-index: 100;
			}
			#goPre{
				left: 0px;
			}
			#goNext{
				right: 0px;
			}
			.item.active{
				z-index: 10;
				opacity: 1;
			}
			.pointList{
				padding-left: 0px;
				list-style: none;
				position: absolute;
				right: 20px;
				bottom: 20px;
				z-index: 1000;
			}
			.point{
				width: 10px;
				height: 10px;
				background-color: rgba(0,0,0,0.4);
				border-radius: 100%;
				float: left;
				margin-right: 16px;
				border-style: solid;
				border-width: 2px;
				border-color: rgba(255,255,255,0.6);
				cursor: pointer;
			}
			
			.point.active{
				background-color: rgba(255,255,255,0.8);
			}
			
			
		</style>
	</head>
	<body>
		<div class="wrap">
			<ul class="list">
				<li class="item active">0</li>
				<li class="item">1</li>
				<li class="item">2</li>
				<li class="item">3</li>
				<li class="item">4</li>
			</ul>
			<ul class="pointList">
				<li class="point active" data-index='0'></li>
				<li class="point" data-index='1'></li>
				<li class="point" data-index='2'></li>
				<li class="point" data-index='3'></li>
				<li class="point" data-index='4'></li>
					
			</ul>
			<button type="button" class="btn" id="goPre"><</button>
			<button type="button" class="btn" id="goNext">></button>
		</div>
		<script type="text/javascript"> 
			var items = document.getElementsByClassName('item');
			var points = document.getElementsByClassName('point');
			var goPreBtn = document.getElementById('goPre');
			var goNextBtn = document.getElementById('goNext');
			
			var time = 0;
			var index = 0;
			
			var clearActive = function(){
				for(var i =0; i< items.length; i++){
					items[i].className = 'item';
				}
				for(var i =0; i< points.length; i++){
					points[i].className = 'point';
				}
				items[index].className = 'item active'
			} 
			
			var goIndex = function(){
				for(var i =0; i< items.length; i++){
					items[i].className = 'item';
				}
				clearActive();
				console.log(index);
				points[index].className ='point active';
				items[index].className = 'item active';
			}
			
			var goNext =function(){
				if(index < 2){
					index++;
				}else{
					index = 0;
				}
				
				goIndex();
			}
			var goPre =function(){
				if(index == 0){
					index = 2;
				}else{
					index--;
				}
				
				goIndex();
			}
			
			// goNextBtn.addEventListener('click',function(){
			// 	goNext();
			// })
			// goPreBtn.addEventListener('click',function(){
			// 	goNext();
			// })
			
			for(var i = 0; i < points.length ; i++){
				points[i].addEventListener('click',function(){
					
					var pointIndex = this.getAttribute('data-index');
					index =pointIndex;
					goIndex();
					time=0;
				})
			}
			
			
			setInterval(function(){
				time++;
				if(time == 20){
					goNext();
					time = 0;
				}
				
			},100)
		</script>
	</body>
</html>
Code block (1) - case of carousel

Guess you like
