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. linux简单快速启用web

    ================= jser.me/2013/11/22/快速启动web服务的两种方式.html Python的SimpleHTTPServer需要先安装python,然后执行 pyt ...

  2. 实验吧—Web——WP之 猫抓老鼠

    打开解题链接后,发现他是让我们输入key提交查询就能进行下一步 题目中提示了:catch(抓的意思) 那么我们很容易就能想到是BP抓包,抓包后直接放到repeater中改包. 我们先GO一下看看有什么 ...

  3. hdu1695 GCD 容斥原理

    Given 5 integers: a, b, c, d, k, you're to find x in a...b, y in c...d that GCD(x, y) = k. GCD(x, y) ...

  4. spring+springMVC,声明式事务失效，原因以及解决办法

    http://blog.csdn.net/z69183787/article/details/37819627#comments 一.声明式事务配置: <bean id="transa ...

  5. 【HAOI2011】 向量

    数论好劲啊 原题: 给你一对数a,b,你可以任意使用(a,b), (a,-b), (-a,b), (-a,-b), (b,a), (b,-a), (-b,a), (-b,-a)这些向量,问你能不能拼出 ...

  6. 生产环境部署MongoDB副本集(带keyfile安全认证以及用户权限)

    本文同步于个人Github博客:https://github.com/johnnian/Blog/issues/8,欢迎留言. 安装软件包:mongodb-linux-x86_64-3.4.1.tgz ...

  7. OpenGL编程-OpenGL框架-win32项目

    在win32项目中开发的程序 小知识: 控制台应用程序运行就是dos的界面 项目一般采用了可视化开发 开发出来的东西就像QQ之类的 是有窗口界面的 程序运行结果是这样的 源代码:对第45行进行覆盖 # ...

  8. ios Programming:The Big Nerd Ranch Guid(6th Edition) (Joe Conway & AARON HILLEGASS 著)

    Introduction (已看) Prerequisites What Has Changed in the Sixth Edition? Our Teaching Philosophy How t ...

  9. c#实现RGB字节数组生成图片

    我是要用c#来实现,现在已经知道了rgb数组,那么如何快速生成一张图片呢? 其实这个话题并不局限于是rgb字节数组的顺序,只要你能对于上表示红.绿.蓝的值,就可以生成图片.知道了原理,做什么都简单了. ...

  10. python之路---08 文件操作

    二十六.   文件 f = open(文件路径,mode = '模式',encoding = '编码格式') 1.基础 ① 读写时,主要看光标的位置 ②操作完成要写    f.close( ) f.f ...