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

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

templates/news/index.html

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

效果

文章来源: Django打造大型企业官网（五）