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. AtCoder Grand Contest 031 B - Reversi

    https://atcoder.jp/contests/agc031/tasks/agc031_b B - Reversi Time Limit: 2 sec / Memory Limit: 1024 ...

  2. 《DSP using MATLAB》Problem 6.18

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

  3. struts2的国际化i18n

    先来例子,普通的读取配置文件中不同语言信息,一个测试类,一份中文配置文件,一份英文配置文件 中文配置文件,书写中文“欢迎”,myelipse自动转码 public class Readi18n { p ...

  4. 监控页面后退前进，浏览器文档加载事件之pageshow、pagehide

    https://www.cnblogs.com/milo-wjh/p/6811868.html http://www.runoob.com/jsref/event-onpageshow.html on ...

  5. react-redux 的使用

    1 安装react-redux: npm install --save react-redux 2.之前使用redux的store.subscribe监听 store的状态改变,通过store.get ...

  6. 梯度下降与pytorch

    记得在tensorflow的入门里,介绍梯度下降算法的有效性时使用的例子求一个二次曲线的最小值. 这里使用pytorch复现如下: 1.手动计算导数,按照梯度下降计算 import torch #使用 ...

  7. 你不知道的JavaScript(中卷) (Kyle Simpson 著)

    第一部分 类型和语法 第1章 类型 1.1 类型 1.2 内置类型 1.3 值和类型 1.3.1 undefined和undeclared 1.3.2 typeof Undeclared 1.4 小结 ...

  8. [ERROR] InnoDB: ibdata1 different size (rounded down to MB)

    启动mysql实例报错,查看 error log ## 错误信息2018-08-31T10:38:36.945081Z 0 [ERROR] InnoDB: The Auto-extending inn ...

  9. MySQL 学习资料

    MySQL 学习资料: MySQL 学习资料 网址 MySQL 教程(菜鸟教程) http://www.runoob.com/mysql/mysql-tutorial.html MySQL 教程(极客 ...

  10. TransportClient 新建index，mappings dynamic_templates。

    public void createIndex(TransportClient client, String index){ CreateIndexRequest request = new Crea ...