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" ...

  8. 图片轮播 js代码

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

  9. 大图轮播js

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

随机推荐

  1. 《DSP using MATLAB》Problem 5.9

    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...

  2. Python IDLE theme

    #转自 http://www.2cto.com/os/201507/418532.html #win10+python3.5.2 #保护视力 .idlerc 目录下新建名为 config-highli ...

  3. ElasticSearch安装部署，基本配置(Ubuntu14.04)

    ElasticSearch部署文档(Ubuntu 14.04) 安装java sudo add-apt-repository ppa:webupd8team/java sudo apt-get upd ...

  4. 05typedef struct用法详解与小结

    1.基本解释 typedef为C语言的关键字,作用是为一种数据类型定义一个新名字,这里的数据类型包括内部数据类型(int,char等)和自定义的数据类型(struct等). 在编程中使用typedef ...

  5. Revit api 创建族并加载到当前项目

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. 如果指针为空，返回ERROR

    if(!p) //是!p而不是p return ERROR;

  7. centos7 虚拟机安装 以后不能联网问题

    1 设置 网络模式为桥接. 2 配置/etx/sysconfig/network-scrips/ifcfg-enthp0s3为如下配置( ip 网段 根据自己网段决定) TYPE=Ethernet P ...

  8. Jenkins进阶-应用的远程部署(12)

    越来越多的公司部署需要实现自动化模式,大家的首选的工具就是Jenkins,下来介绍下通过Publish Over SSH Plugin插件实现远程部署: 一.安装插件Publish Over SSH ...

  9. SpringBoot+Maven 多模块项目的构建、运行、打包

    SpringBoot+Maven 多模块项目的构建.运行.打包 https://blog.csdn.net/zekeTao/article/details/79413919

  10. Ubuntu中编译helloworld驱动

    1. 新建hello文件夹 2.hello.c #ifndef __KERNEL__ # define __KERNEL__ #endif #ifndef MODULE # define MODULE ...