怎么在JavaScript中利用面向对象实现一个无缝滚动轮播

怎么在JavaScript中利用面向对象实现一个无缝滚动轮播？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

创新互联专注为客户提供全方位的互联网综合服务，包含不限于成都网站建设、成都网站设计、新泰网络推广、小程序制作、新泰网络营销、新泰企业策划、新泰品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联为所有大学生创业者提供新泰建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

JavaScript面向对象部分如下：

function Seamless(obj) {
  this.obj = document.getElementById(obj);
  this.oXSlide = GLOBAL.Dom.getElementsByClassName('J_XSlide', this.obj)[0];
  this.li = this.oXSlide.getElementsByTagName('li');
  this.liTabs = GLOBAL.Dom.getElementsByClassName('tabs', this.obj)[0].getElementsByTagName('li');
  this.iNow = 0;
  this.timer = null;
  this.playTime = 2000;
  this.init();
}
Seamless.prototype = {
  // 初始化
  init: function() {
    var _this = this;
    this.timer = setInterval(function(){
      _this.autoPlay();
    }, this.playTime);
    this.overOut();
    this.tab();
  },
  tab: function() {
    var _this = this;
    var btn = GLOBAL.Dom.getElementsByClassName('btn', this.obj);
    this.oXSlide.style.width = this.li.length * this.li[0].offsetWidth + 'px';
    for(var i = 0, len = this.liTabs.length; i < len; i++) {
      this.liTabs[i].index = i;
      GLOBAL.Event.addHandler(this.liTabs[i], 'mouseover', function() {
        _this.showItem(this.index);
      });
    }
    GLOBAL.Event.addHandler(btn[0], 'click', function() {
      _this.moveLeft();
    });
    GLOBAL.Event.addHandler(btn[1], 'click', function() {
      _this.moveRight();
    });
  },
  // 移入移出时，轮播暂停与开始
  overOut: function() {
    var _this = this;
    GLOBAL.Event.addHandler(this.obj, 'mouseover', function() {
      clearInterval(_this.timer);
    });
    GLOBAL.Event.addHandler(this.obj, 'mouseout', function() {
      _this.timer = setInterval(function() {
        _this.autoPlay();
      }, _this.playTime);
    });
  },
  autoPlay: function() {
    this.moveRight();
  },
  // 选项卡
  showItem:function (n) {
    for(var i = 0, len = this.liTabs.length; i < len; i++) {
      this.liTabs[i].className = 'tab';
    }
    if(n == this.liTabs.length) {
      this.liTabs[0].className = 'tab cur';
    }
    else {
      this.liTabs[n].className = 'tab cur';
    }
    startMove(this.oXSlide, {'left': -n * this.li[0].offsetWidth});
  },
  moveLeft:function () {
    this.iNow--;
    if(this.iNow == -1) {
      this.oXSlide.style.left = -this.liTabs.length * this.li[0].offsetWidth + 'px';
      this.iNow = this.liTabs.length - 1;
    }
    this.showItem(this.iNow);
  },
  moveRight:function () {
    this.iNow++;
    if(this.iNow == this.li.length) {
      this.oXSlide.style.left = 0;
      this.iNow = 1;
    }
    this.showItem(this.iNow);
  }
};
new Seamless('box');

关于怎么在JavaScript中利用面向对象实现一个无缝滚动轮播问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。

当前名称：怎么在JavaScript中利用面向对象实现一个无缝滚动轮播
网站地址：http://mswzjz.cn/article/jihdio.html