面向对象实现js+ccs3幻灯特效带有内容提示

2020-06-16 网页编程网 网页编程网

.lb-item > a {
  width: 100%;
  height: 100%;
  display: block;
}

.lb-item > a > img {
  width: 100%;
  height: 100%;
}

.lb-item > a > span {
  width: 100%;
  display: block;
  position: absolute;
  bottom: 0px;
  padding: 15px;
  color: #fff;
  background-color: rgba(0,0,0,0.7);
}
@media (max-width:568px) {
  .lb-item > a > span {
    padding: 10px;
  }
}

.lb-item.active {
  display: block;
  left: 0%;
}
.lb-item.active.left {
  left: -100%;
}
.lb-item.active.right {
  left: 100%;
}

/*  */
.lb-item.next,
.lb-item.prev {
  display: block;
  position: absolute;
  top: 0px;
}
.lb-item.next {
  left: 100%;
}
.lb-item.prev {
  left: -100%;
}
.lb-item.next.left,
.lb-item.prev.right {
  left: 0%;
}

.lb-sign {
  position: absolute;
  right: 10px;
  top: 0px;
  padding: 5px 3px;
  border-radius: 6px;
  list-style: none;
  user-select: none;
  background-color: rgba(0,0,0,0.7);
}

.lb-sign li {
  width: 22px;
  height: 20px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  float: left;
  color: #aaa;
  margin: auto 4px;
  border-radius: 3px;
  cursor: pointer;
}
.lb-sign li:hover {
  color: #fff;
}
.lb-sign li.active {
  color: #000;
  background-color: #EBEBEB;
}

.lb-ctrl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  font-weight: 900;
  user-select: none;
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.1s linear;
}
@media (max-width:568px) {
  .lb-ctrl {
    font-size: 30px;
  }
}
.lb-ctrl.left {
  left: -50px;
}
.lb-ctrl.right {
  right: -50px;
}
.lb-box:hover .lb-ctrl.left {
  left: 10px;
}
.lb-box:hover .lb-ctrl.right {
  right: 10px;
}
.lb-ctrl:hover {
  background-color: #000;
}
</style>
<script>
  window.onload = function () {
    // 轮播选项
    const options = {
      id: 'lb-1',              // 轮播盒ID
      speed: 600,              // 轮播速度(ms)
      delay: 3000,             // 轮播延迟(ms)
      direction: 'left',       // 图片滑动方向
      moniterKeyEvent: true,   // 是否监听键盘事件
      moniterTouchEvent: true  // 是否监听屏幕滑动事件
    }
    const lb = new Lb(options);
    lb.start();
  }
class Lb {
constructor(options) {
  this.lbBox = document.getElementById(options.id);
  this.lbItems = this.lbBox.querySelectorAll('.lb-item');
  this.lbSigns = this.lbBox.querySelectorAll('.lb-sign li');
  this.lbCtrlL = this.lbBox.querySelectorAll('.lb-ctrl')[0];
  this.lbCtrlR = this.lbBox.querySelectorAll('.lb-ctrl')[1];

// 当前图片索引
  this.curIndex = 0;
  // 轮播盒内图片数量
  this.numItems = this.lbItems.length;

// 是否可以滑动
  this.status = true;

// 轮播速度
  this.speed = options.speed || 600;
  // 等待延时
  this.delay = options.delay || 3000;

// 轮播方向
  this.direction = options.direction || 'left';

// 是否监听键盘事件
  this.moniterKeyEvent = options.moniterKeyEvent || false;
  // 是否监听屏幕滑动事件
  this.moniterTouchEvent = options.moniterTouchEvent || false;

this.handleEvents();
  this.setTransition();
}

// 开始轮播
start() {
  const event = {
    srcElement: this.direction == 'left' ? this.lbCtrlR : this.lbCtrlL
  };
  const clickCtrl = this.clickCtrl.bind(this);

// 每隔一段时间模拟点击控件
  this.interval = setInterval(clickCtrl, this.delay, event);
}

// 暂停轮播
pause() {
  clearInterval(this.interval);
}

/**
 * 设置轮播图片的过渡属性
 * 在文件头内增加一个样式标签
 * 标签内包含轮播图的过渡属性
 */
setTransition() {
  const styleElement = document.createElement('style');
  document.head.appendChild(styleElement);
  const styleRule = `.lb-item {transition: left ${this.speed}ms ease-in-out}`
  styleElement.sheet.insertRule(styleRule, 0);
}

// 处理点击控件事件
clickCtrl(event) {
  if (!this.status) return;
  this.status = false;
  if (event.srcElement == this.lbCtrlR) {
    var fromIndex = this.curIndex,
      toIndex = (this.curIndex + 1) % this.numItems,
      direction = 'left';
  } else {
    var fromIndex = this.curIndex;
    toIndex = (this.curIndex + this.numItems - 1) % this.numItems,
      direction = 'right';
  }
  this.slide(fromIndex, toIndex, direction);
  this.curIndex = toIndex;
}

// 处理点击标志事件
clickSign(event) {
  if (!this.status) return;
  this.status = false;
  const fromIndex = this.curIndex;
  const toIndex = parseInt(event.srcElement.getAttribute('slide-to'));
  const direction = fromIndex < toIndex ? 'left' : 'right';
  this.slide(fromIndex, toIndex, direction);
  this.curIndex = toIndex;
}
// 处理滑动屏幕事件
touchScreen(event) {
  if (event.type == 'touchstart') {
    this.startX = event.touches[0].pageX;
    this.startY = event.touches[0].pageY;
  } else {  // touchend
    this.endX = event.changedTouches[0].pageX;
    this.endY = event.changedTouches[0].pageY;

// 计算滑动方向的角度
    const dx = this.endX - this.startX
    const dy = this.startY - this.endY;
    const angle = Math.abs(Math.atan2(dy, dx) * 180 / Math.PI);

// 滑动距离太短
    if (Math.abs(dx) < 10 || Math.abs(dy) < 10) return ;

if (angle >= 0 && angle <= 45) {
      // 向右侧滑动屏幕，模拟点击左控件
      this.lbCtrlL.click();
    } else if (angle >= 135 && angle <= 180) {
      // 向左侧滑动屏幕，模拟点击右控件
      this.lbCtrlR.click();
    }
  }
}

// 处理键盘按下事件
keyDown(event) {
  if (event && event.keyCode == 37) {
    this.lbCtrlL.click();
  } else if (event && event.keyCode == 39) {
    this.lbCtrlR.click();
  }
}

// 处理各类事件
handleEvents() {
  // 鼠标移动到轮播盒上时继续轮播
  this.lbBox.addEventListener('mouseleave', this.start.bind(this));
  // 鼠标从轮播盒上移开时暂停轮播
  this.lbBox.addEventListener('mouseover', this.pause.bind(this));

// 点击左侧控件向右滑动图片
  this.lbCtrlL.addEventListener('click', this.clickCtrl.bind(this));
  // 点击右侧控件向左滑动图片
  this.lbCtrlR.addEventListener('click', this.clickCtrl.bind(this));

// 点击轮播标志后滑动到对应的图片
  for (let i = 0; i < this.lbSigns.length; i++) {
    this.lbSigns[i].setAttribute('slide-to', i);
    this.lbSigns[i].addEventListener('click', this.clickSign.bind(this));
  }

// 监听键盘事件
  if (this.moniterKeyEvent) {
    document.addEventListener('keydown', this.keyDown.bind(this));
  }

// 监听屏幕滑动事件
  if (this.moniterTouchEvent) {
    this.lbBox.addEventListener('touchstart', this.touchScreen.bind(this));
    this.lbBox.addEventListener('touchend', this.touchScreen.bind(this));
  }
}

/**
 * 滑动图片
 * @param {number} fromIndex
 * @param {number} toIndex 
 * @param {string} direction
 */
slide(fromIndex, toIndex, direction) {
  if (direction == 'left') {
    this.lbItems[toIndex].className = "lb-item next";
    var fromClass = 'lb-item active left',
        toClass = 'lb-item next left';
  } else {
    this.lbItems[toIndex].className = "lb-item prev";
    var fromClass = 'lb-item active right',
        toClass = 'lb-item prev right';
  }
  this.lbSigns[fromIndex].className = "";
  this.lbSigns[toIndex].className = "active";

setTimeout((() => {
    this.lbItems[fromIndex].className = fromClass;
    this.lbItems[toIndex].className = toClass;
  }).bind(this), 50);

setTimeout((() => {
    this.lbItems[fromIndex].className = 'lb-item';
    this.lbItems[toIndex].className = 'lb-item active';
    this.status = true;  // 设置为可以滑动
  }).bind(this), this.speed + 50);
}
}
</script>
</head>
<body>
<div class="lb-box" id="lb-1">
  
  <div class="lb-content">
    <div class="lb-item active">
      <a href="#" target="_blank">
        <img src="t1.png" alt="picture loss">
        <span>js代码</span>
      </a>
    </div>
    <div class="lb-item">
      <a href="#" target="_blank">
        <img src="t2.png" alt="picture loss">
        <span>test</span>
      </a>
    </div>
    <div class="lb-item">
      <a href="#" target="_blank">
        <img src="t3.png" alt="picture loss">
        <span>IT</span>
      </a>
    </div>
    <div class="lb-item">
      <a href="#" target="_blank">
        <img src="t4.png" alt="picture loss">
        <span>js代码</span>
      </a>
    </div>   
  </div>
  
  <ol class="lb-sign">
    <li class="active" slide-to="0">1</li>
    <li slide-to="1" class="">2</li>
    <li slide-to="2" class="">3</li>
    <li slide-to="3" class="">4</li>
  </ol>
  
  <div class="lb-ctrl left">＜</div>
  <div class="lb-ctrl right">＞</div>
</div>
</body>

阅读原文

阅读 3160

123 显示电脑版