原生javascript实现一个轮播图(倒计时,自动翻页)

javascript实现一个轮播图倒计时自动翻页

- - html和js代码
  - css 代码

html和js代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="css/banner2.css"  rel="stylesheet"/>
		<script>
			window.addEventListener("load",function(){
    
    
				//点.是类,查找需要操作的对象.
				var banner = document.querySelector('.banner');
				var btn = document.querySelector(".btn");
				var left = document.querySelector(".left");
				var right = document.querySelector(".right");
				
				//不带点是ul
				var ul = document.querySelector('ul');
				var ol = document.querySelector('.circle');
			
			
				//宽度
				var bannerWidth = banner.offsetWidth;
				
				
				//创建两个监听来控制左右键的显示和隐藏
				banner.addEventListener("mouseenter",function(){
    
    
					//显示左右键
					btn.style.visibility='visible';
					clearInterval(time);
					
					
				});
				banner.addEventListener('mouseleave',function(){
    
    
					btn.style.visibility='hidden'
					time = setInterval(function(){
    
    
						right.click();
					},2000);
				});
				
				//添加小圆点
				for (var j = 0; j < ul.children.length; j++) {
    
    
					var li = document.createElement("li");
					li.setAttribute('index', j);
					ol.appendChild(li);
					//小圆点的点击事件 --样式
					li.addEventListener('click',function(){
    
    
						//让所有的状态取消,只留下自己的背景色
						for (var i = 0; i < ol.children.length; i++) {
    
    
							ol.children[i].className = '';
						}
						this.className = 'current';
						//--功能 当前点击的小圆点的下标,用这个下标去更新图片
						var index = this.getAttribute('index');
						num = index;
						ul.style.left = -num*bannerWidth+'px';
					});
				}
				
				//播放的页数
				var num = 0;
	
	
				//右键点击事情
				//记录一个点击次数
				var rCount = 0;
				var rightC = document.querySelector(".rightCount")
				
				right.addEventListener('click',function(){
    
    
					rCount+=1;
					rightC.innerText = "点击了"+rCount +'次';
					//最后一张的时候,从头开始
					if(num == ul.children.length-1){
    
    
						num = 0;
						ul.style.left = 0;
						//改小圆点的样子
						changeCircle();
						return
					}
					num++;
					//偏移的位置.形成轮播图
					ul.style.left = -num*bannerWidth+'px';
					changeCircle();
				});
				
				//左边
				left.addEventListener('click',function(){
    
    
					//第一张的时候,从最后一张开始
					if(num == 0){
    
    
						num = ul.children.length-1;
						ul.style.left = -num*bannerWidth+'px';
						changeCircle();
						return
					}
					num--;
					ul.style.left = -num*bannerWidth+'px';
					changeCircle();
				})
				
				
				function changeCircle(){
    
    
					//改小圆点的样子
					for (var i = 0; i < ol.children.length; i++) {
    
    
						ol.children[i].className = '';
					}
					ol.children[num].className = 'current';
				}
				//设置默认的第一个小圆点为选中
				ol.children[0].className = 'current';
				
				//倒计时: 两位小数的倒计时
				var t2 = 2;
				var timing = document.querySelector(".timing");
				var tt = setInterval(function(){
    
    
					t2 -= 0.1;
					timing.innerText= t2.toFixed(1)+'秒';
					if(t2 <= 0){
    
    
						t2 = 2;
					}
				},100);
				
				//自动播放
				var time = setInterval(function(){
    
    
					//方法1:
					right.click();
					//方法2;
					// if(num == ul.children.length-1){
    
    
					// 	num = 0;
					// 	ul.style.left = 0;
					// 	//改小圆点的样子
					// 	changeCircle();
					// 	return
					// }
					// num++;
					// //偏移的位置.形成轮播图
					// ul.style.left = -num*bannerWidth+'px';
					// changeCircle();
				},2000)
				
			});
		
		</script>
	</head>
	<body>
		
		<div class="banner">
			<div class="rightCount">右边点击了</div>
			<div class="timing">2.0 秒</div>
			<div class="btn">
				<div class="left"><img src="img/left.png"></div>
				<div class="right"><img src="img/right.png"></div>
			</div>
			<ul>
				<li class="pic"><img src="img/1.jpg"></li>
				<li class="pic"><img src="img/2.jpg"></li>
				<li class="pic"><img src="img/3.jpg"></li>
				<li class="pic"><img src="img/4.jpg"></li>
			</ul>
			<ol class="circle">
			</ol>
		</div>
	</body>
</html>

css 代码

* {
    
    
	margin: 0;
	padding: 0;
}

ul,li, ol, a {
    
    
	list-style: none;
	text-decoration: none;
}

.banner {
    
    
	width: 428px;
	height: 300;
	margin: 20px auto;
	overflow: hidden;
	position: relative;
}
.pic {
    
    
	width: 428px;
}
.btn{
    
    
	width: 400px;
	height: 80px;
	position: absolute;
	top: 110px;
	z-index: 5;
}
.left .right{
    
    
	z-index: 2;

}
.left{
    
    
	float: left;
}
.right{
    
    
	float: right;
}

ul{
    
    
	position: relative;
	width: 500%;
}

li{
    
    
	float: left;
}

/* 小圆点 */
ol{
    
    
	position: absolute;
	bottom: 10px;
	left: 50%;
	
}
ol li{
    
    
	float: left;
	width: 10px;
	height: 10px;
	border-radius: 50%;
    border: 2px solid #FFFFEE;
	cursor: pointer;
}
.current{
    
    
	background-color: #FFFFEE;
}
.timing{
    
    
	position: absolute;
	z-index: 4;
	left: 10px;
	top: 30px;
	color: #EEEEEE;
	
}

原生javascript实现一个轮播图(倒计时,自动翻页)

javascript实现一个轮播图 倒计时 自动翻页

html和js代码

css 代码

猜你喜欢

javascript实现一个轮播图倒计时自动翻页