js 面向对象教程系列一（包学包会！！！)

时间 2019-11-21

原文原文链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style type="text/css">
         li{list-style: none}
         *{margin: 0;padding: 0;}
        .banner-novice{width: 750px;margin:50px auto;position: relative;overflow: hidden}
        .banner-novice .img-box{position: relative;left: 0;top:0;}
        .banner-novice .img-box .item{float: left}
        .banner-novice .img-box .item img{width: 100%}
        .banner-novice .prev,.banner-novice .next{position: absolute;top:50%;transform: translateY(-50%);}
        .banner-novice .prev{left: 0;height: 50px;width: 50px;background: url(http://tfwk.cn/Public/Css/images/bannernav.png) no-repeat scroll 0 0;}
        .banner-novice .next{right: 0;background: url(http://tfwk.cn/Public/Css/images/bannernav.png) no-repeat scroll -50px 0;height: 50px;width: 50px;}
         .banner-novice .on{background-color: #F4F4F4}
    </style>
</head>
<body>
<div class="banner-novice" id="bannerbox">
    <div class="img-box">
        <div class="item">
            <img src="http://dummyimage.com/750x420/e4f279">
        </div>
        <div class="item">
            <img src="http://dummyimage.com/750x420/f4079d">
        </div>
        <div class="item">
            <img src="http://dummyimage.com/750x420/dedede">
        </div>
        <div class="item">
            <img src="http://dummyimage.com/750x420/c5b00c">
        </div>
    </div>
    <a href="javascript:;" class="prev"></a>
    <a href="javascript:;" class="next"></a>
</div>
</body>
<script type="text/javascript">
    function Swiper(){
        this.init.apply(this,arguments)
        
    };
    Swiper.prototype.init=function(){
        var that=this;
        this.timer=null;
        this.iCur=8;
        this.on=null;
        this.bug=true;
        this.bannerBox=document.getElementById('bannerbox');
        this.width=parseInt(this.bannerBox.offsetWidth);
        this.next=this.bannerBox.querySelector('.next');
        this.prev=this.bannerBox.querySelector('.prev');
        this.items=this.bannerBox.querySelectorAll('.item');
        this.len=this.items.length;
        this.imgBox=this.bannerBox.querySelector('.img-box');
        this.imgBox.style.width=this.len*parseInt(this.bannerBox.offsetWidth)+'px';
        
        this.prev.onclick=function(){
            that.animatePrev();
            that.domove(0);
        };
        this.next.onclick=function(){
            if(that.bug){
                that.imgBox.style.left='0px';
                that.domove(-that.width);
                that.bug=false;
                return
            }else{
                that.animateNext();
                that.imgBox.style.left='0px';
                that.domove(-that.width);
            };
        };
    };
    Swiper.prototype.animateNext=function(){
        this.imgBox.appendChild(this.bannerBox.querySelectorAll('.item')[0]);
        
    };
    Swiper.prototype.animatePrev=function(){
        this.imgBox.insertBefore(this.bannerBox.querySelectorAll('.item')[this.len-1],this.bannerBox.querySelectorAll('.item')[0]);
        this.imgBox.style.left=-this.width+'px';
    };
    Swiper.prototype.domove=function(target){
        var that=this;
        clearInterval(this.timer);
        this.timer=setInterval(function(){
            var speed=(target-parseInt(that.imgBox.offsetLeft))/that.iCur;

            speed = speed >0 ? Math.ceil(speed) : Math.floor(speed);

            if(Math.abs(parseInt(that.imgBox.offsetLeft))<0){
                clearInterval(that.timer);
                that.imgBox.style.left=target+'px';
            }else{
                that.imgBox.style.left=that.imgBox.offsetLeft+speed+'px';
            };
            
        },30);
    };
    new Swiper();
</script>
</html>

　　上面是demo啦；javascript

本章为小白篇，高手请绕道，由于你确定写过：）。css

下面来为你们讲讲要领吧！html

1.面向对象其实就是属性和方法的归类啦；就是方法归方法，属性归属性；有人会问那为何面向对象去写呢？java

http://www.cnblogs.com/seesea125/archive/2012/04/03/2431176.html。（戳这里吧，感受写的还行）；app

2.我的经验：凡是用到function，定时器里面的this就必定发生变化，你可观察下上面demo啦；关于this的多种用法dom

请戳：http://www.cnblogs.com/pabitel/p/5922511.html。本身的感悟：哪里调用它，this就指向谁。this

3.对于js面向对象，我的以为得本身动手写4-5个，你就能明白个大概喽，本身不动手，永远不能深刻理解！url

----------prototype

不会写文章，原谅哈！orm