比较简单的一种面向对象的轮播图写法

最新推荐文章于 2021-03-16 15:23:17 发布

congboer

最新推荐文章于 2021-03-16 15:23:17 发布

阅读量252

点赞数

分类专栏： js 文章标签：面向对象轮播图透明度

本文链接：https://blog.csdn.net/congboer/article/details/96729659

版权

js 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

比较简单的一种面向对象的轮播图写法

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style>
		* {
			margin: 0;
			padding: 0;
			list-style: none;
		}

		.banner {
			width: 790px;
			height: 340px;
			position: relative;
			border: 1px solid orange;
			margin: 50px auto;
		}

		.banner ul li {
			position: absolute;
			left: 0;
			top: 0;
			/* display: none; */
			opacity: 0;
			transition: all 1s
		}

		.banner ol {
			position: absolute;
			width: 180px;
			height: 20px;
			left: 50%;
			margin-left: -90px;
			bottom: 20px;
		}

		.banner ol li {
			float: left;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: #000;
			margin: 0 5px;
			text-indent: -99999px;
			cursor: pointer;
		}

		.banner ol li.active {
			background: lime;
		}

		#right,
		#left {
			font-size: 100px;
			color: #fff;
			font-family: verdana;
			position: absolute;
			text-decoration: none;
			top: 110px;
			display: none;
		}

		#left {
			left: 20px;
		}

		#right {
			right: 20px;
		}

		#right:hover,
		#left:hover {
			color: #000;
		}
	</style>

</head>

<body>
	<div class="banner">
		<!-- 轮播图片 -->
		<ul>
			<li style="opacity: 1;"><a href="javascript:;"><img src="img/1.jpg" /></a></li>
			<li><a href="javascript:;"><img src="img/2.jpg" /></a></li>
			<li><a href="javascript:;"><img src="img/3.jpg" /></a></li>
			<li><a href="javascript:;"><img src="img/4.jpg" /></a></li>
			<li><a href="javascript:;"><img src="img/5.jpg" /></a></li>
			<li><a href="javascript:;"><img src="img/6.jpg" /></a></li>
		</ul>
		<!-- 轮播下方小圆圈 -->
		<ol>
			<li class="active">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ol>
		<!-- 左右箭头 -->
		<a href="javascript:;" id="left">&lt;</a>
		<a href="javascript:;" id="right">&gt;</a>
	</div>

	<script>
		

		function Lunbo(){
		    this.oli=document.querySelectorAll('.banner ol li')
		    this.banner=document.querySelector('.banner')
			this.left=document.querySelector('#left')
			this.right=document.querySelector('#right')
			this.uli=document.querySelectorAll('.banner ul li')
			this.num=null;
			
			let timer=null;//间隔定时器的返回值
			let _this=this
			// console.log(this)
			this.init=function(){//初始化方法
				//给轮播图下方的小圆圈添加事件
				// console.log(this)
				for(let i=0;i<this.oli.length;i++){
					this.oli[i].onmouseover=function(){
						_this.tabSwitch(i)
						_this.num=i;
						document.title=i
						// console.log(this)
					}
				}

				//鼠标进入banner图，显示左右两边的箭头
				this.banner.onmouseover=function(){
					// console.log(this)
					_this.show()
					clearInterval(timer)//鼠标进入banner时，停止自动轮播
				}

				//鼠标离开banner时，左右箭头消失
				this.banner.onmouseout=function(){
					_this.hide()
					//鼠标离开banner时开启自动轮播
					timer=setInterval(function(){
					_this.rightclick()//每个1秒执行右箭头点击的方法
				},1000)
				}

				//给左箭头添加点击事件
				this.left.onclick=function(){
					_this.leftclick()
				}

				//给右箭头添加点击事件
				this.right.onclick=function(){
					_this.rightclick()
				}

				//自动轮播
				timer=setInterval(function(){
					_this.rightclick()//每个1秒执行右箭头点击的方法
				},1000)
			}

			//小圆圈切换的效果部分
			this.tabSwitch=function(i){
				for(let j=0;j<this.oli.length;j++ ){//先将类名清除，再有针对的添加
					this.oli[j].className=''
					// this.uli[j].style.display=''
					this.uli[j].style.opacity='0'
				}
				this.oli[i].className='active'
				// this.uli[i].style.display='block'
				this.uli[i].style.opacity='1'
			}

			//左右箭头的显示
			this.show=function(){
				this.right.style.display='block';
				this.left.style.display='block'
			}

			//左右箭头消失
			this.hide=function(){
				this.left.style.display='none'
				this.right.style.display='none'
			}

			//左箭头点击事件方法
			this.leftclick=function(){
				this.num--;
				if(this.num<0){
					this.num=this.oli.length-1;
				}
				this.tabSwitch(this.num)
				document.title=this.num
			}

			//右箭头点击事件方法
			this.rightclick=function(){
				this.num++;
				if(this.num>this.oli.length-1){
					this.num=0;
				}
				this.tabSwitch(this.num)
				document.title=this.num
			}
		}

		new Lunbo().init()//调用函数

	</script>
</body>

</html>

congboer

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
比较简单的一种面向对象的轮播图写法

比较简单的一种面向对象的轮播图写法<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; list-style: none; }...
复制链接

扫一扫