Django打造大型企业官网（五）

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

4.8.小圆点结果和样式

templates/news/index.html

                   <div class="page-control-group">
                        <ul class="page-control">
                            <li class="active" ></li>
                            <li ></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>            

src/css/index.scss

             .page-control-group{
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 20px;

                    .page-control{
                        margin: 0 auto;
                        overflow: hidden;
                        width: 12*4px+8*2px+16*3px;

                        li{
                            width: 12px;
                            height: 12px;
                            border: 1px solid #fff;
                            border-radius: 50%;
                            float: left;
                            margin: 0 8px;
                            box-sizing: border-box;
                            cursor: pointer;
                            &.active{
                                background: #ffffff;
                            }
                        }
                    }