欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Django打造大型企业官网(六)

程序员文章站 2022-10-08 20:42:27
4.9.根据轮播图个数修改小圆点数量 src/js/index.js 4.10.小圆点点击事件和自动更新当前选中的小圆点 src/js/index.js src/css/scss.css 4.11.实现自动循环无限轮播 src/js/index.js 4.12.左右牵头切换实现循环轮播 src/js ......

4.9.根据轮播图个数修改小圆点数量

src/js/index.js

function banner() {
    this.bannerwidth = 798;
}

banner.prototype.initbanner = function () {
    var self = this;
    this.bannerul.css({
        "width":self.bannerwidth*self.bannercount
    })
};

banner.prototype.initpagecontrol = function () {
  var self = this;
  var pagecontrol = $(".page-control");
  for (var i=0;i<self.bannercount;i++){
      var circle = $("<li></li>");
      pagecontrol.append(circle);
      if (i === 0){
          circle.addclass("active");
      }
  }
  pagecontrol.css({"width":self.bannercount*12+8*2+16*(self.bannercount-1)});
};

banner.prototype.run = function () {
    this.initbanner();
    this.initpagecontrol();
    this.loop();
    this.listenarrowclick();
};

4.10.小圆点点击事件和自动更新当前选中的小圆点

src/js/index.js

function banner() {
        this.pagecontrol = $(".page-control");
};

banner.prototype.animate = function () {
    var self = this;
    self.bannerul.animate({"left":-798*self.index},500);
    // 通过index获取到当前的li标签,添加active样式,兄弟li标签移除active样式
    self.pagecontrol.children('li').eq(self.index).addclass("active").siblings().removeclass("active");
};

banner.prototype.listenpagecontrol = function () {
    var self = this;
    self.pagecontrol.children("li").each(function (index,obj) {
        $(obj).click(function () {
            self.index = index;
            self.animate();
        });
    });
};

banner.prototype.run = function () {
    this.listenbannerhover();
};

src/css/scss.css

.header{
     z-index: 100;



.banner-group{

    overflow:hidden;
    z-index: 0;

4.11.实现自动循环无限轮播

src/js/index.js

function banner() {
    this.index = 1;
};

banner.prototype.initbanner = function () {
    var self = this;
    //实现无限轮播,原理:123-->>31231,在首尾克隆一张
    var firstbanner = self.lilist.eq(0).clone();
    var lastbanner = self.lilist.eq(self.bannercount-1).clone();
    self.bannerul.append(firstbanner);
    self.bannerul.prepend(lastbanner);
    self.bannerul.css({
        "width":self.bannerwidth*(self.bannercount+2),
        "left":-self.bannerwidth,
    });
};

banner.prototype.animate = function () {
    var self = this;
    self.bannerul.animate({"left":-798*self.index},500);
    //小圆点的active
    var index = self.index;
    if(index === 0){
        index = self.bannercount-1;
    }else if(index === self.bannercount+1){
        index = 0;
    }else{
        index = self.index - 1;
    }
    // 通过index获取到当前的li标签,添加active样式,兄弟li标签移除active样式
    self.pagecontrol.children('li').eq(index).addclass("active").siblings().removeclass("active");
};

banner.prototype.loop = function(){
    var self = this;
    this.timer = setinterval(function () {
        if(self.index >= self.bannercount+1){
            self.bannerul.css({
                "left":-self.bannerwidth,
            });
            self.index = 2;
        }else{
            self.index++;
        }
        self.animate();
    },2000);
};

4.12.左右牵头切换实现循环轮播

src/js/index.js

banner.prototype.listenarrowclick = function () {
    var self = this;
    self.leftarrow.click(function () {
       if(self.index === 0){
           self.bannerul.css({
              "left":-self.bannercount*self.bannerwidth,
           });
           self.index = self.bannercount - 1;
       }else{
           self.index --;
       }
       self.animate();
    });

    self.rightarrow.click(function () {
       if(self.index === self.bannercount + 1){
           self.bannerul.css({
              "left":-self.bannerwidth,
           });
           self.index = 2;
       }else{
           self.index ++;
       }
       self.animate();
    });
};