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

最新推荐文章于 2021-03-16 15:23:17 发布
最新推荐文章于 2021-03-16 15:23:17 发布
阅读量252 收藏 1
点赞数
分类专栏： js 文章标签： 面向对象 轮播图 透明度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/congboer/article/details/96729659
版权

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

<!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
    评论
专栏目录
原生js实现无缝轮播（包括面向对象的写法）
12-13
原生js实现无缝轮播（包括面向对象的写法），包括实现思路。
面向对象方法实现轮播图。
chj_2020的博客
04-20 1166
本次项目所需知识点： ES6构造函数class 面向对象 项目开始： 先将轮播图的素材、结构框架和样式写好 结构： //轮播图的区域 <divclass="box"> //轮播图图片 ...
用面向对象的方法写个轮播图 不敢说很用心 但是值得一看!
weixin_55973231的博客
03-16 231
轮播图 ...
面向对象写轮播图
Pioneer
05-17 1497
html代码&lt;div id="banner"&gt; &lt;ul&gt; &lt;li&gt;&lt;img src="images/lbt1.jpg"&gt;&lt;/li&gt; &lt;li&gt;&lt;img src="images/lbt2.jpg"/&gt;&lt;/li&gt;
基于面向对象的图片轮播（js原生代码）
weixin_34075551的博客
11-15 155
无论你想走多远，你都需要不断地走下去。前端最精华的便是原生的js,这也是我们前端工程师的技术分层的重要指标，也提现这你的代码能力，开发的水平。废话不多说，进入今天的主要分享————基于面向对象思想的图片轮播。其效果如下所示： 正如图片所示这样我们要实现的效果，这里与我们以往不同的是我们的布局十分简洁。其中html布局如下： 1 <!DOCTYPE html> 2 ...
js面向对象的写法
10-22
JavaScript是一种基于原型的面向对象语言，它提供了多种实现面向对象编程的方法。在JavaScript中，面向对象的编程主要包括类、对象、封装、继承和多态等概念。以下将详细介绍标题和描述中提到的四种常见的JavaScript...
归纳下js面向对象的几种常见写法总结
10-21
下面小编就为大家带来一篇归纳下js面向对象的几种常见写法总结。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
常用轮播图写法汇总
12-24
在网页和应用程序设计中，轮播图是一种常见的展示方式，用于在有限的空间内展示多张图片或内容。本文将深入探讨几种使用JavaScript实现轮播图的常见方法，以供开发者参考。 1. **纯CSS轮播图** CSS3提供了强大的...
swift-DZScrollView轮播图简单写法
08-15
Swift-DZScrollView轮播图简单写法是一种在iOS应用中实现轮播图效果的方法，它主要基于Swift编程语言。轮播图通常用于显示一组图片或视图，常见于应用的启动页、广告栏或者产品展示区域。DZScrollView是专门为这个...
JavaScript面向对象写个轮播图
七元八元
08-20 1271
源码： 实战地址 兼容IE，通过透明度控制图片的显示。 1. 面向对象：对外统一提供调用接口的编程思想。     js中Prototype属性解释及常用方法        通过对象的原型属性和方法创建：    在对象原型附加的属性或者方法将成为对象实例化的一部分，类似一个父类，新创建的对象都继承了prototype的属性和方法。这是因为当一个对象被创建时，这个构造函数 将会把它的属性pro...
使用面向对象的轮播图
m0_46370471的博客
03-03 372
面向对象是广为人知的一种编程思想，特点1：继承 2:多态 3：封装。使用面向对象来写一些东西的话增加代码的可读性，泾渭分明，减少代码的冗余，使代码更加简洁吧。可以对比一下，我之前发的一篇轮播图的博客和用面向对象写的博客。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <...
轮播图（面向对象）
weixin_45261642的博客
08-09 806
轮播图，效果如下 一、js文件 1.Utils类 export default class Utils{ static ce(type,style,parent){ var elem=document.createElement(type); if(style){ for(var prop in style){ elem.style[prop]=style[prop]; } }
JS面向对象轮播图实现
weixin_38337068的博客
06-29 1740
在这里只是把实现代码写出来，需要深入讨论交流的加微信 ni461586842 *{ margin: 0; padding: 0; } #pci{ width: 400px; height: 400px; margin: 50px auto; position: relative; overflow: hidden; } ul{ position: ab
js对象字面量
weixin_33736048的博客
04-10 167
对象字面量的输出方式以及定义好处 1.对象字面量的输出方式有两种：传统的‘。’，以及数组方式，只不过用数组方式输出时，方括号里面要用引号括起来，如 var box = { name:’abc’; age:28 }; alert(box[‘name’]); 给对象定义方法， A:如果用传统定义对象的方式，就需要先定义方法，然后再把这个方法名赋值给对象的一个属性，如...
JS实现动态轮播图，一看就懂！
qq_35544440的博客
12-24 942
*话不多说，我们来开始讲解简易动态轮播图的代码书写！ 三步教你学会！ 1.第一步：html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js动态轮播图</title> <link rel="stylesheet" href="cs...
js面向对象---无缝轮播图（附面向过程代码）
sweetllh的博客
06-29 1980
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> <style type="text/css"> *{ padding: 0; margin: 0;
用面向对象方法写的轮播图效果
weixin_30691871的博客
02-08 100
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/...
tkinter 面向对象写法
最新发布
03-28
在使用 tkinter 时，可以采用面向对象的写法，即创建一个类，将 tkinter 的组件作为类的属性，将操作组件的方法作为类的方法，下面是一个简单例子： ```python import tkinter as tk class Application: def __init__(self, master): self.master = master self.label = tk.Label(master, text="Hello, world!") self.label.pack() self.button = tk.Button(master, text="Quit", command=self.quit) self.button.pack() def quit(self): self.master.destroy() root = tk.Tk() app = Application(root) root.mainloop() ``` 在这个例子中，我们创建了一个名为 Application 的类，它有一个构造方法 `__init__`，在这个方法中，我们创建了一个 Label 和一个 Button 组件，并将它们作为类的属性，我们还定义了一个 `quit` 方法，用于关闭窗口。在主程序中，我们创建了一个 Tk 对象和一个 Application 对象，并启动了主程序的事件循环。这个例子还比较简单，但是对于更复杂的 tkinter 程序，采用面向对象的写法可以使代码更清晰易懂。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值