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