Pinocchio_0914 2014-12-02 07:28
浏览 874

图片轮播默认从第4张开始

从网上下的图片轮播效果,默认从第4张开始播放怎么改代码啊

var Effect = (function() {

var Slider = function(o) {
    this.setting      = typeof o === 'object' ? o : {};
    this.target       = this.setting.target || 'slider';
    this.showMarkers  = this.setting.showMarkers || false;
    this.showControls = this.setting.showControls || false;
    this.timer        = null;
    this.currentTime  = null;
    this.ms           = 35;
    this.autoMs       = 4000;
    this.iTarget      = 0;
    this.nextTarget   = 0;
    this.speed        = 0;

    this.init();
    this.handleEvent();
};

Slider.prototype = {
    init: function() {
        this.obj      = document.getElementById(this.target);
        this.oUl      = this.obj.getElementsByTagName('ul')[0];
        this.aUlLis   = this.oUl.getElementsByTagName('li');
        this.width    = this.aUlLis[0].offsetWidth;
        this.number   = this.aUlLis.length;

        this.oUl.style.width = this.width * this.number + 'px';

        if(this.showMarkers) {
            var oDiv = document.createElement('div');
            var aLis = [];
            for(var i = 0; i < this.number; i++) {
                aLis.push('<li>'+ (i+1) +'<\/li>');
            };
            oDiv.innerHTML = '<ol>'+ aLis.join('') +'<\/ol>';
            this.obj.appendChild(oDiv.firstChild);
            this.aLis = this.obj.getElementsByTagName('ol')[0].getElementsByTagName('li');
            this.aLis[0].className = 'active';
            oDiv = null;
        };

        if(this.showControls) {
            this.oPrev = document.createElement('p');
            this.oNext = document.createElement('p');
            this.oPrev.className = 'prev';
            this.oPrev.innerHTML = '&laquo;';
            this.oNext.className = 'next';
            this.oNext.innerHTML = '&raquo;';
            this.obj.appendChild(this.oPrev);
            this.obj.appendChild(this.oNext);

        };

    },

    handleEvent: function() {
        var that = this;

        this.currentTime = setInterval(function() {
            that.autoPlay();
        }, this.autoMs);

        this.addEvent(this.obj, 'mouseover', function() {
            clearInterval(that.currentTime);
        });

        this.addEvent(this.obj, 'mouseout', function() {
            that.currentTime = setInterval(function() {
                that.autoPlay();
            }, that.autoMs);
        });

        if(this.showMarkers) {
            for(var i = 0; i < this.number; i++) {
                var el = this.aLis[i];
                (function(index) {
                    that.addEvent(el, 'mouseover', function() {
                        that.goTime(index);
                    });
                })(i);
            };
        };

        if(this.showControls) {
            this.addEvent(this.oPrev, 'click', function() {
                that.fnPrev();
            });
            this.addEvent(this.oNext, 'click', function() {
                that.autoPlay();
            });
        };

    },

    addEvent: function(el, type, fn) {
        if(window.addEventListener) {
            el.addEventListener(type, fn, false);
        }
        else if(window.attachEvent) {
            el.attachEvent('on' + type, fn);
        };
    },

    fnPrev: function() {
        this.nextTarget--;
        if(this.nextTarget < 0) {
            this.nextTarget = this.number - 1;
        };
        this.goTime(this.nextTarget);
    },

    autoPlay: function() {
        this.nextTarget++;
        if(this.nextTarget >= this.number) {
            this.nextTarget = 0;
        };
        this.goTime(this.nextTarget);
    },

    goTime: function(index) {
        var that = this;

        if(this.showMarkers) {
            for(var i = 0; i < this.number; i++) {
                i == index ? this.aLis[i].className = 'active' : this.aLis[i].className = '';
            };
        };

        this.iTarget = -index * this.width;
        if(this.timer) {
            clearInterval(this.timer);
        };
        this.timer = setInterval(function() {
            that.doMove(that.iTarget);
        }, this.ms);
    },

    doMove: function(target) {
        this.oUl.style.left = this.speed + 'px';
        this.speed += (target - this.oUl.offsetLeft) / 3;
        if(Math.abs(target - this.oUl.offsetLeft) === 0) {
            this.oUl.style.left = target + 'px';
            clearInterval(this.timer);
            this.timer = null;
        };
    }

};

return {

    slider: function(o) {
        var tt = new Slider(o);
    }
};

})();

// 调用语句
Effect.slider({
'targetElement': 'slider',
'showMarkers': true,
'showControls': true
});

  • 写回答

0条回答 默认 最新

    报告相同问题?

    悬赏问题

    • ¥30 这是哪个作者做的宝宝起名网站
    • ¥60 版本过低apk如何修改可以兼容新的安卓系统
    • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
    • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
    • ¥50 有数据,怎么用matlab求全要素生产率
    • ¥15 TI的insta-spin例程
    • ¥15 完成下列问题完成下列问题
    • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
    • ¥15 YoloV5 第三方库的版本对照问题
    • ¥15 请完成下列相关问题!