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