使用html、css、javascript快速实现一个焦点图（轮播图）

这是我参与8月更文挑战的第30天，活动详情查看：8月更文挑战

写在前面：

本文作为本人学习总结之用，同时分享给大家~

个人前端博客网站：zhangqiang.hk.cn

欢迎加入博主的前端学习qq交流群：：706947563，专注前端开发，共同学习进步！

使用技术： html、css、javascript；

源码地址： front-end-study-GoGoGo/template-html-css-js: 网页组件模板汇总 (github.com)

先来看一下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焦点图片自动轮播切换代码</title>
<link rel="stylesheet" href="lb.css">
<script src="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="lb-box" id="lb-1">
<!-- 轮播内容 -->
<div class="lb-content">
  <div class="lb-item active">
    <a href="#">
      <img src="images/t1.png" alt="picture loss">
      <span>Description 1</span>
    </a>
  </div>
  <div class="lb-item">
    <a href="#">
      <img src="images/t2.png" alt="picture loss">
      <span>Description 2</span>
    </a>
  </div>
  <div class="lb-item">
    <a href="#">
      <img src="images/t3.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>