专栏首页有趣的djangoDjango打造大型企业官网(六)

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

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();
    });
};

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • 微信小程序开发系列四:微信小程序之控制器的初始化逻辑

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • Cordova应用的JavaScript代码和自定义插件代码的调试

    我之前写过三篇Cordova相关的技术文章。当我们使用Cordova将自己开发的前端应用打包安装到手机上后,可能会遇到需要调试Cordova应用的时候。

    Jerry Wang
  • JavaScript的语音识别

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • 微信小程序开发系列教程三:微信小程序的调试方法

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • ABAP system landscape和vue项目webpack构建的最佳实践

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • sentry笔记整理

    使用nginx接受请求并对其进行转发。并使用了ngx_http_realip_module模块转发真实请求IP。

    魔王卷子
  • 微信小程序开发系列五:微信小程序中如何响应用户输入事件

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.blog....

    Jerry Wang
  • css元素溢出 overflow

    当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。

    Devops海洋的渔夫
  • 微信小程序开发系列二:微信小程序的视图设计

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券