页面轮播

最新推荐文章于 2024-04-12 07:49:03 发布

weixin_30702413

最新推荐文章于 2024-04-12 07:49:03 发布

阅读量115

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/tianwengao/p/6961271.html

(function($){
    $.extend($.fn, {
        slide: function(){
            this.each(function() {
                var $self = $(this);
                var dom = {
                  "wrap": $self.find(".bannerlist"),
                  "item": $self.find(".bannerlist li"),
                  "firstItem": $self.find(".bannerlist li").first(),
                  "lastItem": $self.find(".bannerlist li").last(),
                  "pagelist": null,
                  "pageItem": null,
                }
                var settings = {
                  "len": dom.item.length,
                  "auto":  true,
                  "timer" : null,
                  "index" : 1,
                  "time"  : 3000
                };
                var funs = {
                  init: function() {
                    if (settings.len < 2) return;
                      var cloneFisrt = dom.firstItem.clone();
                      var cloneLast = dom.lastItem.clone();
                      dom.wrap.append(cloneFisrt);
                      cloneLast.insertBefore(dom.firstItem);

                      var page = '<ul class="banner_bar">';
                      for (var i = 0; i < settings.len; i++) {
                          if (i == 0) {
                            page += '<li class="active"></li>';
                          } else {
                            page += '<li></li>';
                          }
                       }
                      page += '</ul>';
                      $self.append(page);
                      dom.pagelist = $self.find(".banner_bar");
                      dom.pageItem = dom.pagelist.find("li");

                      dom.item = $self.find(".bannerlist li");
                      settings.count = dom.item.length;

                      dom.wrap.css("transform", "translateX(-100%)");

                      this.Event();

                      if(settings.auto){
                        settings.timer = setInterval(this.Animate, settings.time);
                      }
                  },
                  Event: function(){
                      var that = this;
                      $self.on('click','.banner_bar li',function(){
                        settings.index = $(this).index() + 1;
                        dom.wrap.addClass("transform");
                        dom.wrap.css("transform", "translateX(" + -settings.index * 100 + "%)");
                      }).on('mouseenter','.banner_bar li',function(){
                        clearInterval(settings.timer)
                      }).on('mouseleave','.banner_bar li',function(){console.log('leave')
                        settings.timer = setInterval(that.Animate, settings.time);
                      }).on('webkitTransitionEnd','.bannerlist',function(){
                         dom.wrap.removeClass("transform");
                         if (settings.index <= 0) {
                            settings.index = settings.count - 2;
                          }
                          if (settings.index >= settings.count - 1) {
                            settings.index = 1;
                          }
                          var itemIndex =  settings.index - 1;console.log(itemIndex)
                          dom.pageItem.removeClass("active");
                          dom.pageItem.eq("" + itemIndex + "").addClass("active");
                          dom.wrap.css("transform", "translateX(" + -settings.index * 100 + "%)");
                      })
                  },
                  Animate: function(){
                        settings.index++;
                        dom.wrap.addClass("transform");
                        dom.wrap.css("transform", "translateX(" + -settings.index * 100 + "%)");
                  }
                }
                funs.init();
            })
        }
    })
})(window.jQuery)

转载于:https://www.cnblogs.com/tianwengao/p/6961271.html