/ Published in css 设计, html 设计, javascript 设计, JS 特效, 前端设计

网站滚动横幅js特效，细节上可以在CSS 和html 上略做需改

html

<!DOCTYPE HTML>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>原生js图片轮播切换代码 - A5源码</title>
<link rel="stylesheet" href="https://code.5g-o.com/wp-content/uploads/2020/01/lb.css">
<script src="https://code.5g-o.com/wp-content/uploads/2020/01/lb.js"></script>
<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();
}
</script>
</head>

<body>
<div class="https://code.5g-o.com/wp-content/uploads/2020/01/lb.css" id="lb-1">
<!-- 轮播内容 -->
<div class="lb-content">
  <div class="lb-item active">
  <a href="#">
    <img src="https://code.5g-o.com/wp-content/uploads/2020/01/t3.png" alt="picture loss">
    <span>Description 1</span>
  </a>
  </div>
  <div class="lb-item">
  <a href="#">
    <img src="https://code.5g-o.com/wp-content/uploads/2020/01/t2.png" alt="picture loss">
    <span>Description 2</span>
  </a>
  </div>
  <div class="lb-item">
  <a href="#">
    <img src="https://code.5g-o.com/wp-content/uploads/2020/01/t2.png" alt="picture loss">
    <span>Description 3</span>
  </a>
  </div>
  <div class="lb-item">
  <a href="#">
    <img src="images/t4.png" alt="picture loss">
    <span>Description 4</span>
  </a>
  </div>   
</div>
<!-- 轮播标志 -->
<ol class="lb-sign">
  <li class="active">1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ol>
<!-- 轮播控件 -->
<div class="lb-ctrl left">＜</div>
<div class="lb-ctrl right">＞</div>
</div>


</body>
</html>

css

body{background-color: #252525}
.lb-box {
  width: 60%;
  height: 580px;
  margin: 15px auto;
  position: relative;
  overflow: hidden;
}
@media (max-width:568px) {
  .lb-box {
    width: 76%;
    height: 220px;
  }
}

.lb-content {
  width: 100%;  
  height: 100%;
}

.lb-item {
  width: 100%;  
  height: 100%;
  display: none;
  position: relative;   
}

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

js

/**
 * @desc 一个轮播插件 
 * @author Mxsyx (zsimline@163.com)
 * @version 1.0.0
 */

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

 

让链接同时具备两种打开方式

获取源码: Jiaoben7257
下载数:101人次, 文件大小: 52.2 KB, 上传日期: 2020年-11 月-26日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

3,587 人查阅

一键获取本网站前端代码设计的所有源码

获取资源构建和完善自己的源码库
源码可以在本地直接演示
同时研究和体验 如何将一些具体的想法的实现过程
源码可以直接嫁接到自己的网站里复用
稍作修改成为自己的作品下载 (4)

您需要先支付 8元 才能查看此处内容！立即支付

Tagged under: , ,