js-简单点击轮播

最新推荐文章于 2024-04-12 07:49:03 发布

南风北

最新推荐文章于 2024-04-12 07:49:03 发布

阅读量139

点赞数

分类专栏： js基础

本文链接：https://blog.csdn.net/weixin_48962287/article/details/119596935

版权

js基础专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.countiner{
				position: relative;
				width: 1000px;
				height: 410px;
				margin: 100px auto;
			}
			.countiner_list img{
				position: absolute;
				opacity: 0;
				transition: all .3s; 
			}
			.btn_left,.btn_right{
				position: absolute;
				top: 50%;
				transition: transparent .6s;
				cursor: pointer;
			}
			.btn_left{
				left: 0;
			}
			.btn_right{
				right: 0;
			}
			.btn_left:hover,.btn_right:hover{
				transform: scale(1.1);
			}
		</style>
	</head>
	<body>
		<div class="countiner">
			<div class="countiner_list">
				<img src="img/1.jpg"  style="opacity: 1;">
				<img src="img/2.jpg" >
				<img src="img/3.jpg" >
				<img src="img/4.jpg" >
				<img src="img/5.jpg" >
				<img src="img/6.jpg" >
			</div>
			<div class="btn">
				<img src="img/l.png"  class="btn_left">
				<img src="img/r.png" class="btn_right">
			</div>
		</div>
		<script type="text/javascript">
			var btnr=document.querySelector('.btn_right')
			var btnl=document.querySelector('.btn_left')
			var imgs=document.querySelectorAll('.countiner_list img')
			var index=0;
			for (var i = 0; i < imgs.length; i++) {
				btnr.onclick=function(){
					index++;
					if(index>5){
						index=0;
					}
					for (var i = 0; i < imgs.length; i++) {
						imgs[i].style.opacity ='0';
					}
					imgs[index].style.opacity='1';
				}
				
			}
			
			
			
			for (var i = 0; i < imgs.length; i++) {
				btnl.onclick=function(){
					index--;
					if(index<0){
						index=5;
					}
					for (var i = 0; i < imgs.length; i++) {
						imgs[i].style.display ='none';
					}
					imgs[index].style.display='block';
				}
				
			}
			setInterval(btnr.onclick,2000); 
		</script>
	</body>
</html>

只可以点击轮播，然后设置了一个定时器，没有小圆点，也不能平移滑动