轮播图淡入淡出

最新推荐文章于 2022-03-23 15:05:35 发布

月下丶

最新推荐文章于 2022-03-23 15:05:35 发布

阅读量233

点赞数

本文链接：https://blog.csdn.net/weixin_42500793/article/details/81412764

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.banner{
				width: 500px;
				height: 350px;
				margin: 50px auto;
				position: relative;
				cursor: pointer;
			}
			img{
				width: 500px;
				height: 350px;
				position: absolute;
				opacity: 0;
				transition: 4s;
				cursor: pointer;
			}
			.ban-imags img.on{
				opacity: 1;
			}
			.btn-left{
				font-size: 48px;
				background-color: lightgray;
				position: absolute;
				left: 0;
				top: 130px;
				width: 50px;
				height: 80px;
				text-align: center;
				cursor: pointer;
				opacity: 0.4;
			}
			.btn-right{
				font-size: 48px;
				background-color: lightgray;
				position: absolute;
				right: 0;
				top: 130px;
				width: 50px;
				height: 80px;
				text-align: center;
				cursor: pointer;
				opacity: 0.4;
			}
			.uls{
				position: absolute;
				bottom: 0;
				left:50px;
			}
			.uls li{
				width: 30px;
				height: 30px;
				background-color: lightblue;
				border-radius: 50%;
				float: left;
				margin-left: 10px;
				text-align: center;
				line-height: 30px;
				color: red;
				font-weight: 600;
				cursor: pointer;
			}
			.uls li.on{
				background-color: deepskyblue;
			}
		</style>
	</head>
	<body>
		<div class="banner">
			<div class="ban-imags">
				<img class="on" src="img/timg1.jpg">
				<img src="img/timg2.jpg">
				<img src="img/timg3.jpg">
				<img src="img/timg4.jpg">
				<img src="img/timg5.jpg">
				<img src="img/timg6.jpg">
				<img src="img/timg7.jpg">
				<img src="img/timg8.jpg">
			</div>
			<div class="btn-left"> &lt</div>
			<div class="btn-right"> &gt</div>
			<ul class="uls">
				<li class="on">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
			</ul>
		</div>
	</body>
</html>
<script type="text/javascript">
	
	(function(){
		
		var oleft=document.querySelector(".btn-left"),
			oright=document.querySelector(".btn-right"),
			aimgs=document.querySelectorAll(".ban-imags img"),
			lis=document.querySelectorAll(".uls li"),
			banner=document.querySelector(".banner"),
			//定时器设置
			timer=null,
			
			//控制图片下标
			index=0,
			
			//控制上一次图片下标
			lastindex=0;
			//console.log(oleft,oright,aimgs);
		
		//左箭头点击切换图片
		oleft.onclick=function(){
			change(function(){
				index--;
				//边界判断,越界
				if(index<0){
					index=aimgs.length-1;	
				}
			})
		};
		
		//右箭头点击切换图片
		oright.onclick=orghtTo;
		function orghtTo(){
			change(function(){
				index++;
				if(index>=aimgs.length){
					index=0;
				}
			})
		};
		
		//图片自动切换
		auto();
		function auto(){
			timer=setInterval(orghtTo,1000);
				/*function(){
				change(function(){
					index++;
					index%=aimgs.length;
				})
			},1000)*/
		};
		
		//鼠标进入图片停止
		banner.onmouseover=function(){
			window.clearInterval(timer);
		}
		
		//鼠标离开，图片继续切换
		banner.onmouseout=function(){
			auto();
		}
		
		//小圆点点击事件
		for(var i=0;i<lis.length;i++){
			//保存i的值,自定义对象
			lis[i].index=i;
			lis[i].onclick=function(){
				var This=this.index;
				change(function(){
					//只作用于一个函数，因为没有对象调用，所以指向window对象
					index=This;
				})
			}
		};
		
		//执行改变函数
		function change(callback){
			//利用循环清除所有类名
			/*for(var i=0;i<aimgs.length;i++){
				aimgs[i].className="";
				lis[i].className="";
			}*/
			
			//清除上一次的类名（样式）
			aimgs[lastindex].className="";
			lis[lastindex].className="";
			
			//回调函数，下标变化，给别人使用可以任意改变
			callback();
			//index++;  判断，如果点击左键--，右键++
			
			//边界判断,越界
			//index%=aimgs.length; 1%8=0 余1 
			/*if(index>=aimgs.length){
				index=0;
			}*/
			
			//设置当前下标样式
			//原型链
			aimgs[index].className="on";
			lis[index].className="on";
			
			//重新赋值，当前样式设置完变成上一个
			lastindex=index;
		};	
	})();
	
	
</script>

月下丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
轮播图淡入淡出

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{ margin: 0; padding: 0;
复制链接

扫一扫