面向对象的轮播js

时间：2023-02-14 15:41:10

　　1.自执行函数的前后要加分号

　　案例：

　　;(function(){})();

　　2.面向对象的最大优势节省了许多内存

　　正式开写面向对象的轮播；

　　

　　<!DOCTYPE html>
　　<html>
　　<head>
　　　　<meta charset="UTF-8">
　　　　<title>面向对象的轮播</title>
　　　　<style>
　　　　　　.slide{
　　　　　　　　width:600px;
　　　　　　　　height:400px;
　　　　　　　　margin:100px auto;
　　　　　　　　position:relative;
　　　　　　}
　　　　　　.slide>div{
　　　　　　　　width:600px;
　　　　　　　　height:400px;
　　　　　　　　display:none;
　　　　　　}
　　　　　　.slide>div:nth-of-type(1){
　　　　　　　　display:block;
　　　　　　}
　　　　　　img{
　　　　　　　　width:100%;
　　　　　　　　height:100%;
　　　　　　}
　　　　　　button{
　　　　　　　　width:40px;
　　　　　　　　height:40px;
　　　　　　　　border:none;
　　　　　　　　position:absolute;
　　　　　　}
　　　　　　button:nth-of-type(1){
　　　　　　　　top:50%;
　　　　　　　　left:0;
　　　　　　}
　　　　　　button:nth-of-type(2){
　　　　　　　　top:50%;
　　　　　　　　right:0;
　　　　　　}
　　　　　　ul,ol{
　　　　　　　　list-style:none;
　　　　　　　　position:absolute;
　　　　　　　　bottom:20px;
　　　　　　　　left:30%;
　　　　　　}
　　　　　　ul>li{
　　　　　　　　width:20px;
　　　　　　　　float:left;
　　　　　　　　height:20px;
　　　　　　　　margin-right:10px;
　　　　　　　　background:#ccc;
　　　　　　　　border-radius:50%;
　　　　　　}
　　　　　　ul>li:nth-of-type(1){
　　　　　　　　background:red;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<div id="slide" class="slide">
　　　　　　<div><img src="img/1.jpg" /></div>
　　　　　　<div><img src="img/2.jpg" /></div>
　　　　　　<div><img src="img/3.jpg" /></div>
　　　　　　<button><</button>
　　　　　　<button>></button>
　　　　　　<ul>
　　　　　　　　<li></li>
　　　　　　　　<li></li>
　　　　　　　　<li></li>
　　　　　　</ul>
　　　　</div>
　　</body>
　　</html>
　　<script>
　　　　var slide=document.getElementById("slide");
　　　　function Person(obj){
　　　　　　this.obj=obj;
　　　　　　//this指向实例对象
　　　　　　//实例的属性，获取slide下所有的div
　　　　　　this.divs=this.obj.getElementsByTagName("div");
　　　　　　//实例的属性，获取slide下所有的按钮，用来切换图片
　　　　　　this.bth=this.obj.getElementsByTagName("button");
　　　　　　//实例的属性，获取slide下所有的小圆点，用来点击
　　　　　　this.lis=this.obj.getElementsByTagName("li");
　　　　　　//设置用来开启定时器的实例属性
　　　　　　this.t=null;
　　　　　　//设置一个属性，让其功能的索引匹配；
　　　　　　this.num=0;
　　　　}
　　　　Person.prototype={
　　　　　　//开辟新的空间时会将原内存销毁，constructor就会消失
　　　　　　constructor:Person,
　　　　　　//开启一个定时器的方法；
　　　　　　ding:function(){
　　　　　　　　//每次开启定时器时，先清掉定时器
　　　　　　　　clearInterval(this.t)
　　　　　　　　//定时器的this都指向window，利用bind的写法，将定时器的window换成实例对象
　　　　　　　　this.t=setInterval(this.qie.bind(this),1000)
　　　　　　return this //返回实例对象 实现链式写法
　　　　　　},
　　　　　　//定时器方法中用来切换图片的；
　　　　　　qie:function(){
　　　　　　　　//让定时器运动
　　　　　　　　this.num++
　　　　　　　　//如果图片走完，从第一张继续走
　　　　　　　　if(this.num>this.divs.length-1){
　　　　　　　　this.num=0
　　　　　　}
　　　　　　//通过for循环的目的，就是让所有的图片隐藏起来，只让他对应的索引显示出来
　　　　　　for(var i=0;i<this.divs.length;i++){
　　　　　　　　this.divs[i].style.display="none";
　　　　　　　　this.lis[i].style.background="#ccc";
　　　　　　}
　　　　　　//通过索引知道是具体的第几个div（图片）显示出来
　　　　　　this.divs[this.num].style.display="block"
　　　　　　//通过索引知道是具体的第几个小圆点变成红色
　　　　　　this.lis[this.num].style.background="red"
　　　　},
　　　　//当鼠标悬浮时关闭定时器的方法；
　　　　over:function(){
　　　　　　//this指向实例对象
　　　　　　this.obj.onmouseover=function(){
　　　　　　　　//this指向this.obj
　　　　　　　　clearInterval(this.t) //this受到了影响，所以用bind
　　　　　　}.bind(this)
　　　　　　//在返回实例对象，用于链式写法
　　　　return this
　　　　},
　　　　//当鼠标离开时，在次开启定时器
　　　　out:function(){
　　　　　　//this指向实例对象
　　　　　　this.obj.onmouseout=function(){
　　　　　　　　//this指向this.obj
　　　　　　　　//当开启定时器时，先关闭定时器
　　　　　　　　clearInterval(this.t)
　　　　　　　　//当鼠标离开时，继续开启定时器
　　　　　　　　this.t=setInterval(this.qie.bind(this),1000) //this冲突，要让this指向实例对象用window
　　　　　　}.bind(this)
　　　　return this //返回实例对象，用于链式写法
　　　　},
　　　　//按钮的事件
　　　　bthclick:function(){
　　　　　　// this指向实例对象
　　　　　　//左按钮的点击事件
　　　　　　this.bth[0].onclick=function(){
　　　　　　　　// this指向this.bth[0]
　　　　　　　　//从最后一张往前切换
　　　　　　　　this.num--
　　　　　　　　if(this.num<0){
　　　　　　　　　　this.num=2
　　　　　　　　}
　　　　　　//利用for循环将其余的图片及按钮隐藏掉，默认色
　　　　　　　　for(var i=0;i<this.divs.length;i++){
　　　　　　　　　　this.divs[i].style.display="none";
　　　　　　　　　　this.lis[i].style.background="#ccc";
　　　　　　　　}
　　　　　　//利用索引将想得到的图片及按钮显示出来
　　　　　　　　this.divs[this.num].style.display="block";
　　　　　　　　this.lis[this.num].style.background="red";
　　　　　　　　//this指向this.bth[0]。想让this指向实例对象，用bind
　　　　　　　　}.bind(this);
　　　　　　this.bth[1].onclick=function(){
　　　　　　　　// this指向this.bth[0]
　　　　　　　　//从最后一张往前切换
　　　　　　　　this.num++
　　　　　　　　if(this.num>2){
　　　　　　　　　　this.num=0
　　　　　　　　}
　　　　　　//利用for循环将其余的图片及按钮隐藏掉，默认色
　　　　　　for(var i=0;i<this.divs.length;i++){
　　　　　　　　this.divs[i].style.display="none";
　　　　　　　　this.lis[i].style.background="#ccc";
　　　　　　}
　　　　　　//利用索引将想得到的图片及按钮显示出来
　　　　　　this.divs[this.num].style.display="block";
　　　　　　this.lis[this.num].style.background="red";
　　　　　　//this指向this.bth[0]。想让this指向实例对象，用bind
　　　　}.bind(this)
　　　　//用链式写法，所以将实例对象返回
　　　　return this;
　　},
　　　　//圆点的点击按钮事件
　　　　yuan:function(){
　　　　　　//因为事件中的点击需要用到this，所以不能用bind,只能提前声明一个this
　　　　　　var that=this;
　　　　　　//利用for循环得到原点的事件；
　　　　　　for(var i=0;i<this.lis.length;i++){
　　　　　　　　//添加一个索引的属性
　　　　　　　　this.lis[i].index=i;
　　　　　　　　this.lis[i].onclick=function(){
　　　　　　　　　　//that代表实例对象，this代表 this.lis[i]
　　　　　　　　　　//通过for循环将图片隐藏和原点的默认原色
　　　　　　　　　　for(var j=0;j<that.lis.length;j++){
　　　　　　　　　　　　that.lis[j].style.background="#ccc";
　　　　　　　　　　　　that.divs[j].style.display="none";
　　　　　　　　　　}
　　　　　　　　　　//将点击的原点颜色变红，图片显示出来
　　　　　　　　　　this.style.background="red";
　　　　　　　　　　that.divs[this.index].style.display="block";
　　　　　　　　　　//将num和圆点点击后的索引匹配
　　　　　　　　　　that.num=this.index;
　　　　　　　　}
　　　　　　}
　　　　　　return this;
　　　　　　}

　　　　}
　　　　var lunbo=new Person(slide)
　　　　lunbo.ding().over().out().bthclick().yuan()
　　</script>

　　曾经美国有个案例：某公司一个程序员枪击了他的4个同事，原因就是没有写注释，希望大家可以借鉴哈

面向对象的轮播js的更多相关文章

  1. 网站图片的轮播JS代码

    这是几个网站的轮播JS效果,实现图片按照时间来切换,目前有几个站实现该功能,特别是浴室柜网站改版前,以下就是JS具体内容可以自己改下路径就可以用的linkarr = new Array();picar ...

  2. js轮播功能 标签自动切换 同页面多轮播js

    需要加入jquery 1.43及以上版本 下面还有个简单版,一个页面只支持一个轮播 同页面多轮播js <div> <div class="yt_content"& ...

  3. 简单的音乐轮播JS

    首先说明一点,此篇文章只是为了回应一些博友的要求,本人并非专业搞js的,所以键盘侠和各路大神如果看到此文还请轻喷或者可以直接关掉页面~ 直接上代码: <div id="myboot&q ...

  4. 仿主题广告轮播js

    function SlideShow(c) { var a = document.getElementById("slide"); var f = document.getElem ...

  5. JS 基于面向对象的 轮播图1

    ---恢复内容开始--- 1 'use strict' 2 function Tab(id){ 3 if(!id)return; 4 this.oBox = document.getElementBy ...

  6. JS 基于面向对象的 轮播图2

    <script> // 函数不能重名, --> 子函数 // is defined function --> 函数名是否写错了 function AutoTab(id) { T ...

  7. 简单轮播js实现

    <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8&quot ...

  8. 图片轮播 js代码

    <script type="text/javascript"> //图片轮换 $(function () { //------------------ var sWid ...

  9. 大图轮播js

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

随机推荐

  1. Python之路【第六篇】：面向对象编程相关

    判断类与对象关系 isinstance(obj, cls)  判断对象obj是否是由cls类创建的 #!/usr/bin/env python #-*- coding:utf-8 -*- class ...

  2. Ubuntu 15&period;04 安装 Nvidia Quadro系列显卡驱动

    在这之前,我用的Ubuntu都是系统自带的驱动, 由于分辨率没有任何问题, 所以一直没有安装Nvidia官方的驱动; 近期更新到 15.04 之后, 在播放avi 格式的常规视频时却出现闪烁的现象, ...

  3. JavaScript高级程序设计11&period;pdf

    与操作字符串有关的最后一个方法是localeCompare(),这个方法比较两个字符串,按照字符串的字母表中的位置分别返回-1,0,1 var stringValue="yellow&quo ...

  4. 贝叶斯网络基础（Probabilistic Graphical Models）

    本篇博客是Daphne Koller课程Probabilistic Graphical Models(PGM)的学习笔记. 概率图模型是一类用图形模式表达基于概率相关关系的模型的总称.概率图模型共分为 ...

  5. jQuery EasyUI combobox多选和赋值

    定义select <select id="ID" name=empVO.acunid class="easyui-combobox" required=& ...

  6. 脚本语言：Xmas（二）

    本篇,来谈谈类型系统,以及部分与垃圾收集器相关的内容. 一.基本类型 Xmas的基本类型:Null.Boolean.Label.String.Ref.Function.Integer.Float.De ...

  7. js对象属性 通过点&lpar;&period;&rpar; 和 方括号&lpar;&lbrack;&rsqb;&rpar; 的不同之处

    //    js对象属性 通过点(.) 和 方括号([]) 的不同之处 //    1.点操作符: 静态的.右侧必须是一个以属性名称命名的简单标识符.属性名用一个标识符来表示.标识符必须直接出现再js ...

  8. Python快速学习10： 循环的对象及设计 （生活的规律）

    前言 系列文章:[传送门] 生活逐渐规律,按时睡觉.今天写博客,明天补时间看会书.慢慢的时间很珍惜 我很喜欢! 时钟就像个循环体,我们将它融入生活. 正文 循环对象的并不是随着Python的诞生就存在 ...

  9. Day7--------------IP地址与子网划分

    1.ip地址:32位    172.16.45.10/16 网络位:前十六位是网络位 主机位:后16位是主机位 网络地址:172.16.0.0 主机地址:172.16.45.10 A类: 0NNNNN ...

  10. LVS&plus;Keepalived实现MySQL从库读操作负载均衡配置

    转载于osyunwei 说明: 操作系统:CentOS 5.X 64位 MySQL主服务器:192.168.21.126 MySQL从服务器:192.168.21.127,192.168.21.128 ...

相关文章