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. hdu1846 Brave Game 博弈

    十年前读大学的时候,中国每年都要从国外引进一些电影大片,其中有一部电影就叫<勇敢者的游戏>(英文名称:Zathura),一直到现在,我依然对于电影中的部分电脑特技印象深刻.今天,大家选择上 ...

  2. Go Example--指针

    package main import ( "fmt" ) func zeroval(ival int) { ival = 0 } func zeroptr(iptr *int) ...

  3. win10安装系统后，提示initializing and establishing link无法启动系统

    使用老毛桃安装系统前,先对硬盘进行分区,分区时选择mbr格式分区就可以了,安装好系统重启进入系统时将boot安全启动关闭,模式改为legal(那个单词大概长这样,不记得了,反正那里就两个模式,可以都试 ...

  4. pushpin 将web services 转换为realtime api 的反向代理工具

    pushpin 是一款反向代理工具,可以将web services 转换为实时的api 参考架构图 包含的特性 透明 无状态 共享nothing 发布&&订阅模型 几种灵活用法 基本使 ...

  5. 递归和非递归分别实现求n的阶乘

    思路:举例求6的阶乘,6*5*4*3*2*1.可以将5开始看成另一个整型变量n,用一个循环每次将n的值减少1,.而递归也是如此,每次调用函数的时候将变量减一就可以. 方法一:非递归 //非递归: #i ...

  6. Revit api 创建楼梯图元

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

  7. [转]Spring IOC父子容器简介

    通过HierarchicalBeanFactory接口,Spring的IoC容器可以建立父子层级关联的容器体系,子容器可以访问父容器中的Bean,但父容器不能访问子容器的Bean.在容器内,Bean的 ...

  8. elastic 部分更新 retry_on_conflict 和 数据库写锁 详细比对

    1 数据库的  update 在修改这条数据的的过程中(这个过程指的是 数据库执行update 到 事务提交的过程中 )为这条数据加上 写锁,阻止 别的事务 对锁定数据的修改,请求后一个修改事务的线程 ...

  9. java中==与equals

    == ==可用于比较基本类型与引用类型,对于基本类型变量比较的是其存储的值是否相等,对于引用类型则比较的是其是否指向同一个对象. 如: int a = 10; int b = 20; double d ...

  10. C#:memcached安装及.NET中的Memcached.ClientLibrary使用详解

    memcached分布式缓存的负载均衡配置比例,数据压缩,socket的详细配置等,以及在.net中的常用方法. 下载地址:http://pan.baidu.com/s/1yVILw       提取 ...