js面向对象封装一个小插件【图片轮播】，王-伟-峰

封装：

function Slider(container, opts){
        this.$outer = $(container);
        this.$inner = this.$outer.children();
        this.$prev = $(opts.prev);
        this.$next = $(opts.next);
        this.$els = this.$inner.children();
        this.total = this.$els.length;
        this.w = this.$els.outerWidth(true);
        this.timer = null;
        this.isSliding = false;
        this.autoplay = opts.autoplay || false;
        this.init();
    }
    var proto = Slider.prototype;
    proto.init = function(){
        var self = this;
        var $last = this.$els.eq(this.total-1);
        if(this.total<6){
            $last = this.$els.clone().appendTo(this.$inner).eq(this.total-1);
            this.total *= 2;
        }
        $last.prependTo(this.$inner);
        this.$inner.css('marginLeft', -this.w);
        console.log(this.$next)
        this.$prev.on('click', function(){
            self.prev();
        })
        this.$next.on('click', function(){
            self.next();
        })
        this.$outer.on('mouseenter', function(){
            clearTimeout(self.timer);
        })
        this.$outer.on('mouseleave', function(){
            self.auto();
        })
        this.auto();
    }
    proto.prev = function(){
        if(this.isSliding) return;
        this.isSliding = true;
        var self = this;
        this.$inner.animate({
            marginLeft: 0
        }, 500, function(){
            self.$inner.children().eq(self.total-1).prependTo(self.$inner);
            self.$inner.css('marginLeft', -self.w);
            self.isSliding = false;
        })
    }
    proto.next = function(){
        if(this.isSliding) return;
        this.isSliding = true;
        var self = this;
        this.$inner.animate({
            marginLeft: -this.w*2
        }, 500, function(){
            self.$inner.children().eq(0).appendTo(self.$inner);
            self.$inner.css('marginLeft', -self.w);
            self.isSliding = false;
        })
    }
    proto.auto = function(){
        if(!this.autoplay) return;
        var self = this;
        function delay(){
            self.timer = setTimeout(function(){
                self.next();
                delay();
            }, 5000)
        }
        delay();
    }

调用：

new Slider('.slideOuter',{
    prev: '.prev',
    next: '.next',
    autoplay: true
});

html:

<div class="slider">
    <a href="javascript:;" class="prev"><img src="images/prev.png" alt="">a>
    <a href="javascript:;" class="next"><img src="images/next.png" alt="">a>
    <div class="slideOuter">
        <ul class="clearfix">
            <li>
                <img src="http://mcake.oss-cn-hangzhou.aliyuncs.com/goods/lanmeiqingrunapolun/N0301/list/1.jpg" alt="">
                <p class="p1 clearfix"><span class="fl">蓝莓轻乳拿破仑span><span class="fr">规格：1磅span>p>
                <p class="p2 clearfix"><span class="fl">杭州平安银行信用卡五折折后价：span><span class="fr"><span>94span>元span>p>
                <a href="javascript:;" class="buybtn">立即订购a>
            li>
            <li>
                <img src="http://mcake.oss-cn-hangzhou.aliyuncs.com/goods/faxiangnaiyoukeli/C0201/list/1.jpg" alt="">
                <p class="p1 clearfix"><span class="fl">蓝莓轻乳拿破仑span><span class="fr">规格：1磅span>p>
                <p class="p2 clearfix"><span class="fl">杭州平安银行信用卡五折折后价：span><span class="fr"><span>94span>元span>p>
                <a href="javascript:;" class="buybtn">立即订购a>
            li>
            <li>
                <img src="http://mcake.oss-cn-hangzhou.aliyuncs.com/goods/kafaxiangti/C0101/list/1.jpg" alt="">
                <p class="p1 clearfix"><span class="fl">蓝莓轻乳拿破仑span><span class="fr">规格：1磅span>p>
                <p class="p2 clearfix"><span class="fl">杭州平安银行信用卡五折折后价：span><span class="fr"><span>94span>元span>p>
                <a href="javascript:;" class="buybtn">立即订购a>
            li>
            <li>
                <img src="http://mcake.oss-cn-hangzhou.aliyuncs.com/goods/mangguomangue/C0401/list/1.jpg" alt="">
                <p class="p1 clearfix"><span class="fl">蓝莓轻乳拿破仑span><span class="fr">规格：1磅span>p>
                <p class="p2 clearfix"><span class="fl">杭州平安银行信用卡五折折后价：span><span class="fr"><span>94span>元span>p>
                <a href="javascript:;" class="buybtn">立即订购a>
            li>
            <li>
                <img src="http://mcake.oss-cn-hangzhou.aliyuncs.com/goods/hutaobulaji/B0101/list/1.jpg" alt="">
                <p class="p1 clearfix"><span class="fl">蓝莓轻乳拿破仑span><span class="fr">规格：1磅span>p>
                <p class="p2 clearfix"><span class="fl">杭州平安银行信用卡五折折后价：span><span class="fr"><span>94span>元span>p>
                <a href="javascript:;" class="buybtn">立即订购a>
            li>
            <li>
                <img src="http://www.mcake.com/postsystem/docroot/images/goods/20140828/1073/list_1073_1.jpg" alt="">
                <p class="p1 clearfix"><span class="fl">蓝莓轻乳拿破仑span><span class="fr">规格：1磅span>p>
                <p class="p2 clearfix"><span class="fl">杭州平安银行信用卡五折折后价：span><span class="fr"><span>94span>元span>p>
                <a href="javascript:;" class="buybtn">立即订购a>
            li>
        ul>
    div>
div>

css:

body, ul, li, ol, h1, h2, h3, h4, h5, h6, p {
    margin: 0;
}
ul, ol {
    list-style: outside none none;
}
img {
    border: 0 none;
}
.clearfix {
}
.clearfix::after {
    clear: both;
    content: "";
    display: block;
    font-size: 0;
    height: 0;
    line-height: 0;
    visibility: hidden;
}


.slider {
width: 1200px;
position: relative;
margin: 30px auto; }
.slider .prev,.slider .next {
width: 79px;
top: 148px;
position: absolute; }
.slider .prev {
left: 0; }
.slider .next {
right: 0; }
.slideOuter {
width: 1028px;
height: 368px;
border-bottom: 2px solid #959595;
overflow: hidden;
margin: 0 auto; }
.slideOuter ul {
width: 1650px; }
.slideOuter li {
width: 242px;
margin: 0 20px 18px 0;
color: #242424;
font-size: 12px;
float: left; }
.slideOuter li .fl {
  float: left; }
.slideOuter li .fr {
  float: right; }
.slideOuter li .p1 {
  margin: 26px 0 3px 0; }
.slideOuter li .p2 .fr {
  color: #a40000; }
 .slideOuter li .p2 .fr span {
    font-size: 19px; }
.slideOuter li .p2 .fl {
  padding-top: 5px; }
.slideOuter li .buybtn {
  width: 100%;
  height: 30px;
  display: block;
  border-radius: 2px;
  margin: 16px 0 0 0;
  background: #b50e0d;
  color: #ffffff;
  text-align: center;
  line-height: 30px;
  font-size: 16px;
  position: static; }

 

转载于:https://www.cnblogs.com/shimily/articles/6548632.html