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