前端网页--中秋节快乐【轮播图】

NicesLife
1,022 阅读3分钟

我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

中秋节了，你收到月饼了吗🥮，哈哈哈哈，首先祝大家中秋节快乐，biubiubiu～

中秋节没能回家，制作了一个中秋节相关的轮播图网页。

一、准备中秋素材

主要使用的素材是图片，借用了b站花好月圆会宣传网页的一些图片还有百度图片。说句题外话，个人感觉b站很多宣传的网页十分的好看，风格各异，古风、动漫啥都有，但它并没有用很多的前端特效，大部分都是图片，所以说我十分佩服b站的美工设计师们。👍

image.png

二、网页布局

网页布局包含三部分：固定的背景、中秋习俗相关的轮播图和中秋祝福。

image.png

（一）固定的背景

1、设置背景

为body设置背景图片，将background-attachment设置为fixed，使在页面滚动时背景固定。

//css
body {
  margin: 0;
  padding: 0;

  width: 100vw;
  height: 100vh;
  background-image: url(./imgs/bg.png);
  background-size: 100%;
  background-attachment: fixed;
  background-repeat: no-repeat;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

2、设置掩膜

个人感觉加个掩膜比较好看，相当于在背景图上覆盖了一层纱，实现方式就是通过添加一个掩膜div，将它的背景颜色透明度设置低一点。

//html
 <div class="mask"></div>

//css
.mask {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: rgba(100, 100, 100, 0.3);
}

image.png

（二）中秋习俗相关的轮播图

1、页面布局

这一部分我使用弹性布局，将轮播图放在了页面中心的位置。利用绝对定位的特性，将上一张、下一张和中秋习俗标题放在了轮播图中的指定位置。 中秋习俗标题和中秋祝福使用的字体都是华文行楷STXingkai

//html
 <div id="cus-item">
        <div id="imgs">
          <img class="img-item" src="imgs/1.png" alt="" />
          <img class="img-item" src="imgs/2.png" alt="" />
          <img class="img-item" src="imgs/3.png" alt="" />
          <img class="img-item" src="imgs/4.png" alt="" />
          <img class="img-item" src="imgs/5.png" alt="" />
        </div>
        <div class="arrow">
          <div id="pre"></div>
          <div id="next"></div>
        </div>
        <div id="title"></div>
      </div>

//css
#custom #cus-item {
  position: relative;
  width: 490px;
  height: 295px;
  margin-top: 65px;
}
#custom #cus-item #imgs {
  width: 490px;
  height: 295px;
}
#custom #cus-item #imgs img {
  position: absolute;
  width: 490px;
  height: 295px;
  display: none;
  border: rgba(248, 222, 26, 0.8) solid 2px;
}
#custom #cus-item #imgs img:first-child {
  display: block;
}
#custom #cus-item .arrow {
  position: absolute;
  width: 15px;
  height: 62px;
  top: 50%;
  margin-top: -31px;
  background-size: 100%;
  cursor: pointer;
}
#custom #cus-item #pre {
  position: absolute;
  width: 15px;
  height: 62px;
  background-image: url(imgs/pre.png);
  background-size: 100%;
  left: 5px;
}
#custom #cus-item #next {
  position: absolute;
  width: 15px;
  height: 62px;
  background-image: url(imgs/next.png);
  background-size: 100%;
  left: 470px;
}
#custom #cus-item #title {
  position: absolute;
  width: 36px;
  top: 20%;
  right: 80px;
  font-family: "STXingkai";
  font-size: 30px;
  color: rgba(248, 222, 26, 0.8);
}

2、轮播图封装

考虑到轮播图的复用性，我对轮播图进行了封装。

（1）实例化参数

创建轮播图实例需要传入的参数有：轮播图最外围的div标签wrap、轮播图图片标签数组imgs、上一张和下一张标签数组paging、中秋习俗标题标签title以及轮播图对应的习俗标题数组titles

function Banner(wrap, imgs, paging, title, titles) {
  this.wrap = wrap;
  this.imgs = imgs;
  this.paging = paging;
  this.title = title;
  this.titles = titles;
  this.timer = 0;
  this.index = 0;
  this.init();
}

（2）封装成员函数

  1. 初始化函数init：该函数用于实例对象的初始化，在构造函数中调用。
  2. 禁止拖拽函数notDrag：该函数用阻止默认事件，禁止轮播图被拖拽。
  3. 自动轮播函数auto：当鼠标不在轮播图内时，图片自动轮播。
  4. 图片切换函数pagingClick：点击上一张或下一张，对图片进行切换。
init: function () {
    this.title.innerHTML = this.titles[this.index];
    this.imgs[this.index].style.display = "block";
    this.notDrag();
    this.auto();
    this.wrapHover();
    this.pagingClick();
  },
  notDrag: function () {
    for (let i = 0; i < this.imgs.length; i++) {
      this.imgs[i].ondrag = this.imgs[i].onmousedown = function (e) {
        e = e || event;
        e.preventDefault
          ? e.preventDefault()
          : (window.event.returnValue = false);
      };
    }
  },
  auto: function () {
    let that = this;
    this.timer = setInterval(function () {
      that.checkOut(function () {
        that.index++;
        that.index = that.index % that.imgs.length;
      });
    }, 1000);
  },
  checkOut: function (callback) {
    this.imgs[this.index].style.display = "none";
    callback && callback();
    this.title.innerHTML = this.titles[this.index];
    console.log(this.title);
    this.imgs[this.index].style.display = "block";
  },
  pagingClick: function () {
    let that = this;
    for (let i = 0; i < this.paging.length; i++) {
      if (i) {
        this.paging[i].onclick = function () {
          that.checkOut(function () {
            that.index++;
            that.index = that.index % that.imgs.length;
          });
        };
      } else {
        this.paging[i].onclick = function () {
          that.checkOut(function () {
            that.index--;
            if (that.index < 0) that.index = that.imgs.length - 1;
          });
        };
      }
    }
  },
  wrapHover: function () {
    let that = this;
    this.wrap.onmouseenter = function () {
      clearInterval(that.timer);
    };
    this.wrap.onmouseleave = function () {
      that.auto();
    };
  },

（3）实例化轮播图对象

let wrap = document.getElementById("cus-item");
let imgs = document.getElementById("imgs").getElementsByTagName("img");
let pre = document.getElementById("pre");
let next = document.getElementById("next");
let paging = [pre, next];
let titles = ["赏月", "燃灯", "猜灯谜", "烧塔", "吃月饼"];
let title = document.getElementById("title");
//创建实例对象
let banner = new Banner(wrap, imgs, paging, title, titles);

（三）中秋祝福

但愿人长久，千里共婵娟

我通过设置writing-mode属性，将div里面的的文字竖排，其实也可以使用Ps将中秋祝福设置成一张图片，这样还能比较方便地在祝福里添加其他中秋元素，不如月亮、月饼、玉兔等，使用css+html也可以设计，我懒的找素材了，大家有兴趣可以继续丰富。

  <div class="bless" id="right">但愿人长久</div>
  <div class="bless" id="left">千里共婵娟</div>

.bless {
    position: absolute;
    width: 50px;
    height: 300px;
    right: 120px;
    font-family: "STXingkai";
    font-size: 54px;
    color: rgba(248, 222, 26, 0.8);
    writing-mode: tb-rl;
}
#right {
    top: 100px;
}
#left {
    bottom: 100px;
    transform: translateX(-80px);
}

三、结束语

中秋快乐🥮

麻烦点个赞吧👍，嘻嘻嘻

avatar
文章
阅读
粉丝