Django打造大型企业官网

Posted 2022-01-25 derek1184405959

4.6.切换轮播图的箭头样式以及显示和隐藏

templates/news/index.html

<span class="arrow left-arrow">‹</span>
<span class="arrow right-arrow">›</span>

src/css/index.scss

                .arrow
                  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
                  font-size: 70px;
                  color: #fff;
                  top: 50%;
                  margin-top: -45px;
                  cursor: pointer;
                  position: absolute;
                  display: none;
                

                .left-arrow
                  left: 20px;
                

                .right-arrow
                  right: 20px;
                

src/js/index.js

//初始化
function Banner() 
    this.bannerGroup = $("#banner-group");
    this.index = 0;
    this.leftArrow = $(‘.left-arrow‘);
    this.rightArrow = $(‘.right-arrow‘);
    this.listenBannerHover();
;

Banner.prototype.toggleArrow = function (isShow) 
    if(isShow) 
        var self = this;
        self.leftArrow.show();
        self.rightArrow.show();
    else
        self.leftArrow.hide();
        self.rightArrow.hide();
    
;

Banner.prototype.listenBannerHover = function ()
  var self = this;
  this.bannerGroup.hover(function () 
      //鼠标移动到上面
      clearInterval(self.timer);
      self.toggleArrow(true);
  ,function () 
      //鼠标离开
      self.loop();
      self.toggleArrow(false);
  );
;

 4.7.轮播图上下切换

gulpfile.js

var util = require("gulp-util");
var sourcemaps = require("gulp-sourcemaps");


//js任务
gulp.task("js",done =>
    gulp.src("./src/js/*.js")
    .pipe(sourcemaps.init())
    .pipe(uglify().on(‘error‘,util.log))
    .pipe(rename("suffix":".min"))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(‘./dist/js/‘))
    .pipe(bs.reload(
        stream: true
    ));
    done();
);

src/js/index.js

//初始化
function Banner() 
    this.bannerGroup = $("#banner-group");
    this.index = 0;
    this.leftArrow = $(‘.left-arrow‘);
    this.rightArrow = $(‘.right-arrow‘);
    //获取li标签的数量，去控制点轮播图的箭头，下一张上一张图片
    this.bannerUL = $("#banner-ul");
    this.liList = this.bannerUL.children("li");
    this.bannerCount = this.liList.length;
    this.listenBannerHover();
;

Banner.prototype.animate = function () 
    var self = this;
    self.bannerUL.animate("left":-798*self.index,500);
;


Banner.prototype.listenArrowClick = function () 
    var self = this;
    self.leftArrow.click(function () 
       if(self.index === 0)
           self.index = self.bannerCount - 1;
       else
           self.index --;
       
       self.animate();
    );

    self.rightArrow.click(function () 
       if(self.index === self.bannerCount - 1)
           self.index = 0;
       else
           self.index ++;
       
       self.animate();
    );
;

//添加一个run方法
Banner.prototype.run = function () 
    this.loop();
    this.listenArrowClick();
;

效果