文件夹结构

├── css
│   ├── common.css
│   ├── detail.css
│   └── index.css
├── detail.html
├── images
│   ├── 1.jpg
│   ├── pause.png
│   ├── play.png
│   └── rocket.png
├── index.html
├── js
│   ├── auto-reader.js
│   ├── data.js
│   ├── index.js
│   └── utils.js

详情

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Auto Reader</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <!-- 顶部 -->
  <div class="list-hd">
    <h1>书籍列表</h1>
  </div>
  <!-- 列表 -->
  <div class="container">
    <ul class="bk-list"></ul>
  </div>

  <script type="text/template" id="list-item-template">
    <li class="item">
      <a href="detail.html">
        <div class="bk-pic">
          <img src="{{ imgUrl }}" alt="">
        </div>
        <div class="bk-info">
          <h2>{{ title }}</h2>
          <p>作者：{{ author }}</p>
          <p class="intro">简介：{{ intro }}</p>
          <p>时间：{{ date }}</p>
        </div>
      </a>
    </li>
  </script>
  <script src="./js/data.js"></script>
  <script src="./js/index.js"></script>
</body>
</html>

detail.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Auto Reader</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/detail.css">
</head>
<body>
  <!-- 顶部 -->
  <div class="list-hd">
    <h1>书籍详情</h1>
  </div>
  <!-- 详情 -->
  <div class="container">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit, placeat quasi et sit rerum vel temporibus cum sint quisquam earum autem consequuntur iste quos distinctio quis libero hic fugit harum sed molestias. Facilis, sed aspernatur! Inventore dolorem eius mollitia veniam atque explicabo repudiandae exercitationem, fuga ipsam est odit placeat totam saepe ea libero error consequuntur earum optio quo ut. Vero quaerat sit dolores, omnis alias nihil qui officia! Assumenda, possimus! Velit repellendus totam voluptas placeat sequi neque molestias harum asperiores tenetur mollitia temporibus vitae quo ab quam eius natus, vel voluptatem enim inventore sunt! In maiores perspiciatis harum architecto error animi quam voluptas ratione tempore, voluptatem laborum temporibus pariatur totam nemo perferendis omnis saepe a quasi ullam tenetur atque? Impedit, necessitatibus porro. Esse nam totam, ipsum harum sit quia dolores laboriosam? Placeat necessitatibus tenetur reiciendis accusantium accusamus voluptatibus in, mollitia quod, reprehenderit excepturi, officiis dolores neque beatae id amet sunt. Eligendi in tenetur ut natus, sequi dolores excepturi quae quo? Voluptas, omnis modi distinctio commodi eaque, deserunt facilis qui dolorum ipsum quam voluptates error eum tempore enim vero sit. Atque accusamus ea aliquam aperiam ducimus, nisi pariatur iste sunt deleniti quasi odit mollitia vitae sequi placeat voluptatem consequatur veniam reiciendis aliquid, dignissimos repellat. Quia nesciunt itaque veniam sit earum minima, consectetur sint amet modi exercitationem, natus recusandae corrupti quo, pariatur ad harum consequatur! Sequi nesciunt doloribus rerum autem? Explicabo blanditiis, soluta magni molestiae maiores, quam a ab ad, veritatis velit illum. Aliquam sunt autem a illo, nesciunt consectetur molestias quia modi eos delectus ipsum necessitatibus corrupti error exercitationem doloremque nostrum obcaecati iusto vitae? Soluta excepturi magni earum sed voluptatum suscipit neque dolorum ratione repellendus nostrum, voluptatem officia atque rerum tempore, vel numquam aliquam voluptatibus libero aperiam ipsa quas perferendis. Blanditiis inventore voluptatum, nostrum quis, ullam eos at dolore, id esse totam sunt illo nulla? Ipsum corporis odio est distinctio dolorem quae ipsam exercitationem sunt asperiores! Magnam, incidunt aspernatur nostrum amet vitae veniam numquam ex quia obcaecati laborum? Labore veniam dolor recusandae non repellat minima cumque, vero eveniet reiciendis voluptatum distinctio id provident libero. Sit, quam excepturi iste optio magnam voluptates, sint tempora itaque cupiditate repellat sapiente quo, nam vitae omnis. Esse dicta nobis repudiandae excepturi minus, dolorem commodi? Tempora beatae veritatis commodi ratione a architecto labore reiciendis voluptas exercitationem? Commodi consequuntur dolorem possimus, accusamus ex repellendus, quibusdam consectetur laborum accusantium rerum voluptatem, velit sequi eligendi eius repudiandae eum at. Fuga numquam possimus labore aliquid fugiat maxime ratione eligendi facilis commodi enim obcaecati ut, ea similique nemo asperiores praesentium explicabo accusantium libero doloremque dolorum quis atque porro soluta corrupti. Sequi vel, voluptatibus fugit hic mollitia minus ab aspernatur, reiciendis ipsam, enim officiis ratione minima? Et explicabo consequatur magnam illum tempora corporis, expedita error, harum iste mollitia dolor quibusdam. Distinctio magnam illo ad quisquam consectetur aut similique id cupiditate vero recusandae in inventore consequatur tenetur, obcaecati quibusdam error, reprehenderit veniam adipisci rem corporis impedit, perspiciatis velit! Dolores consectetur ducimus non, tempore, eum sunt iure rem, beatae illum consequatur sapiente provident fugit officia eos cum! Facilis saepe voluptate magnam temporibus aliquid eos recusandae, velit commodi quia voluptatem, amet aut repellendus labore voluptates, quaerat perspiciatis expedita. Atque, iusto! Accusamus dolorem vero placeat velit maxime fugit necessitatibus repellat, laudantium, dolorum harum, explicabo ea facere reiciendis? Repellat, ipsam. Cumque omnis rerum quae ipsam tempore velit, quia consectetur repellat dolores aliquam qui pariatur nam reprehenderit aut. Animi, soluta nulla, natus totam labore facilis ab saepe voluptatum, dolorum itaque earum impedit. Et minima rem voluptatum, voluptatibus sapiente harum sed distinctio at, blanditiis ipsum omnis corrupti voluptas mollitia assumenda officia, doloribus ut iste vero. Nesciunt autem rem provident et ipsam eligendi explicabo saepe earum suscipit assumenda! Vel dolorum ipsa perspiciatis molestiae minima laudantium accusamus quae, ipsam tempora maxime impedit qui numquam deserunt iusto voluptates laboriosam cumque obcaecati excepturi illum dicta quis eius nulla ad. Architecto tempora, voluptate sequi, eaque cupiditate non facilis doloremque repellat obcaecati ex cumque aliquid numquam autem deserunt modi enim soluta excepturi optio possimus. Blanditiis, similique nihil repellat, est at magnam facere impedit quos, sit quo cumque molestiae! At culpa esse voluptatibus ipsa molestiae possimus pariatur, cumque id cum tempora excepturi? Atque molestias placeat eius, unde asperiores rem sit sunt dolore iste repellat corporis. Nostrum dicta impedit ut, voluptates, mollitia voluptatibus optio culpa aut consequuntur aspernatur veritatis repudiandae aliquid deserunt, quisquam recusandae maxime quae cupiditate reiciendis eveniet possimus nesciunt doloribus assumenda sunt! Nobis minus vitae aliquam voluptatem asperiores dicta ducimus explicabo blanditiis illo eligendi optio unde odio maxime quaerat, alias veritatis magni quidem quod consequuntur molestiae excepturi numquam. Nobis culpa aperiam soluta tenetur! Quod laudantium animi dicta aliquid sed esse odio ipsum odit quibusdam explicabo earum deleniti fuga hic ab tempore voluptatem possimus laborum, quisquam magnam cum doloribus? Delectus suscipit minus, hic praesentium placeat officiis cum nulla error quam ea eius quod consectetur, quia aperiam, enim eum animi quas! Reiciendis, alias? Pariatur tempore harum iure recusandae nobis, culpa voluptatibus amet, fuga consectetur, mollitia et! Beatae qui totam culpa, nostrum ab dicta ipsum, blanditiis neque doloribus laboriosam nobis, commodi deleniti magni impedit et? Explicabo ullam similique autem ex corrupti distinctio accusantium voluptate alias sit tempore vero ut, blanditiis harum quaerat minima! Tempora, eveniet labore a quis aspernatur, ipsam vitae repellendus quasi omnis impedit quod! Voluptatibus ipsa exercitationem eum tenetur provident error facere, adipisci, numquam officiis omnis repellat asperiores dolores quae! Atque saepe aliquid cumque pariatur alias error, minima temporibus odio cum modi velit a accusamus nihil ea ipsam quos quaerat nisi? Pariatur quasi eos eaque similique, dolores voluptates aliquid iusto labore repellendus fugiat repudiandae rem quidem voluptas in debitis neque odit quam esse commodi illo nam sapiente. Mollitia, sequi ipsa libero tenetur similique asperiores quidem quisquam itaque corrupti doloribus veniam corporis cum velit enim facilis vel vero iusto voluptate fugit odit molestias. Dolor facere ipsa nihil consequatur tenetur ea quia eos ex necessitatibus itaque vel quidem provident error hic, possimus accusamus porro deleniti amet perferendis. Non error vel autem impedit dicta ipsum, velit suscipit corporis animi molestiae esse assumenda sapiente consectetur delectus explicabo neque. Repellat, dicta consequuntur.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit, placeat quasi et sit rerum vel temporibus cum sint quisquam earum autem consequuntur iste quos distinctio quis libero hic fugit harum sed molestias. Facilis, sed aspernatur! Inventore dolorem eius mollitia veniam atque explicabo repudiandae exercitationem, fuga ipsam est odit placeat totam saepe ea libero error consequuntur earum optio quo ut. Vero quaerat sit dolores, omnis alias nihil qui officia! Assumenda, possimus! Velit repellendus totam voluptas placeat sequi neque molestias harum asperiores tenetur mollitia temporibus vitae quo ab quam eius natus, vel voluptatem enim inventore sunt! In maiores perspiciatis harum architecto error animi quam voluptas ratione tempore, voluptatem laborum temporibus pariatur totam nemo perferendis omnis saepe a quasi ullam tenetur atque? Impedit, necessitatibus porro. Esse nam totam, ipsum harum sit quia dolores laboriosam? Placeat necessitatibus tenetur reiciendis accusantium accusamus voluptatibus in, mollitia quod, reprehenderit excepturi, officiis dolores neque beatae id amet sunt. Eligendi in tenetur ut natus, sequi dolores excepturi quae quo? Voluptas, omnis modi distinctio commodi eaque, deserunt facilis qui dolorum ipsum quam voluptates error eum tempore enim vero sit. Atque accusamus ea aliquam aperiam ducimus, nisi pariatur iste sunt deleniti quasi odit mollitia vitae sequi placeat voluptatem consequatur veniam reiciendis aliquid, dignissimos repellat. Quia nesciunt itaque veniam sit earum minima, consectetur sint amet modi exercitationem, natus recusandae corrupti quo, pariatur ad harum consequatur! Sequi nesciunt doloribus rerum autem? Explicabo blanditiis, soluta magni molestiae maiores, quam a ab ad, veritatis velit illum. Aliquam sunt autem a illo, nesciunt consectetur molestias quia modi eos delectus ipsum necessitatibus corrupti error exercitationem doloremque nostrum obcaecati iusto vitae? Soluta excepturi magni earum sed voluptatum suscipit neque dolorum ratione repellendus nostrum, voluptatem officia atque rerum tempore, vel numquam aliquam voluptatibus libero aperiam ipsa quas perferendis. Blanditiis inventore voluptatum, nostrum quis, ullam eos at dolore, id esse totam sunt illo nulla? Ipsum corporis odio est distinctio dolorem quae ipsam exercitationem sunt asperiores! Magnam, incidunt aspernatur nostrum amet vitae veniam numquam ex quia obcaecati laborum? Labore veniam dolor recusandae non repellat minima cumque, vero eveniet reiciendis voluptatum distinctio id provident libero. Sit, quam excepturi iste optio magnam voluptates, sint tempora itaque cupiditate repellat sapiente quo, nam vitae omnis. Esse dicta nobis repudiandae excepturi minus, dolorem commodi? Tempora beatae veritatis commodi ratione a architecto labore reiciendis voluptas exercitationem? Commodi consequuntur dolorem possimus, accusamus ex repellendus, quibusdam consectetur laborum accusantium rerum voluptatem, velit sequi eligendi eius repudiandae eum at. Fuga numquam possimus labore aliquid fugiat maxime ratione eligendi facilis commodi enim obcaecati ut, ea similique nemo asperiores praesentium explicabo accusantium libero doloremque dolorum quis atque porro soluta corrupti. Sequi vel, voluptatibus fugit hic mollitia minus ab aspernatur, reiciendis ipsam, enim officiis ratione minima? Et explicabo consequatur magnam illum tempora corporis, expedita error, harum iste mollitia dolor quibusdam. Distinctio magnam illo ad quisquam consectetur aut similique id cupiditate vero recusandae in inventore consequatur tenetur, obcaecati quibusdam error, reprehenderit veniam adipisci rem corporis impedit, perspiciatis velit! Dolores consectetur ducimus non, tempore, eum sunt iure rem, beatae illum consequatur sapiente provident fugit officia eos cum! Facilis saepe voluptate magnam temporibus aliquid eos recusandae, velit commodi quia voluptatem, amet aut repellendus labore voluptates, quaerat perspiciatis expedita. Atque, iusto! Accusamus dolorem vero placeat velit maxime fugit necessitatibus repellat, laudantium, dolorum harum, explicabo ea facere reiciendis? Repellat, ipsam. Cumque omnis rerum quae ipsam tempore velit, quia consectetur repellat dolores aliquam qui pariatur nam reprehenderit aut. Animi, soluta nulla, natus totam labore facilis ab saepe voluptatum, dolorum itaque earum impedit. Et minima rem voluptatum, voluptatibus sapiente harum sed distinctio at, blanditiis ipsum omnis corrupti voluptas mollitia assumenda officia, doloribus ut iste vero. Nesciunt autem rem provident et ipsam eligendi explicabo saepe earum suscipit assumenda! Vel dolorum ipsa perspiciatis molestiae minima laudantium accusamus quae, ipsam tempora maxime impedit qui numquam deserunt iusto voluptates laboriosam cumque obcaecati excepturi illum dicta quis eius nulla ad. Architecto tempora, voluptate sequi, eaque cupiditate non facilis doloremque repellat obcaecati ex cumque aliquid numquam autem deserunt modi enim soluta excepturi optio possimus. Blanditiis, similique nihil repellat, est at magnam facere impedit quos, sit quo cumque molestiae! At culpa esse voluptatibus ipsa molestiae possimus pariatur, cumque id cum tempora excepturi? Atque molestias placeat eius, unde asperiores rem sit sunt dolore iste repellat corporis. Nostrum dicta impedit ut, voluptates, mollitia voluptatibus optio culpa aut consequuntur aspernatur veritatis repudiandae aliquid deserunt, quisquam recusandae maxime quae cupiditate reiciendis eveniet possimus nesciunt doloribus assumenda sunt! Nobis minus vitae aliquam voluptatem asperiores dicta ducimus explicabo blanditiis illo eligendi optio unde odio maxime quaerat, alias veritatis magni quidem quod consequuntur molestiae excepturi numquam. Nobis culpa aperiam soluta tenetur! Quod laudantium animi dicta aliquid sed esse odio ipsum odit quibusdam explicabo earum deleniti fuga hic ab tempore voluptatem possimus laborum, quisquam magnam cum doloribus? Delectus suscipit minus, hic praesentium placeat officiis cum nulla error quam ea eius quod consectetur, quia aperiam, enim eum animi quas! Reiciendis, alias? Pariatur tempore harum iure recusandae nobis, culpa voluptatibus amet, fuga consectetur, mollitia et! Beatae qui totam culpa, nostrum ab dicta ipsum, blanditiis neque doloribus laboriosam nobis, commodi deleniti magni impedit et? Explicabo ullam similique autem ex corrupti distinctio accusantium voluptate alias sit tempore vero ut, blanditiis harum quaerat minima! Tempora, eveniet labore a quis aspernatur, ipsam vitae repellendus quasi omnis impedit quod! Voluptatibus ipsa exercitationem eum tenetur provident error facere, adipisci, numquam officiis omnis repellat asperiores dolores quae! Atque saepe aliquid cumque pariatur alias error, minima temporibus odio cum modi velit a accusamus nihil ea ipsam quos quaerat nisi? Pariatur quasi eos eaque similique, dolores voluptates aliquid iusto labore repellendus fugiat repudiandae rem quidem voluptas in debitis neque odit quam esse commodi illo nam sapiente. Mollitia, sequi ipsa libero tenetur similique asperiores quidem quisquam itaque corrupti doloribus veniam corporis cum velit enim facilis vel vero iusto voluptate fugit odit molestias. Dolor facere ipsa nihil consequatur tenetur ea quia eos ex necessitatibus itaque vel quidem provident error hic, possimus accusamus porro deleniti amet perferendis. Non error vel autem impedit dicta ipsum, velit suscipit corporis animi molestiae esse assumenda sapiente consectetur delectus explicabo neque. Repellat, dicta consequuntur.</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit, placeat quasi et sit rerum vel temporibus cum sint quisquam earum autem consequuntur iste quos distinctio quis libero hic fugit harum sed molestias. Facilis, sed aspernatur! Inventore dolorem eius mollitia veniam atque explicabo repudiandae exercitationem, fuga ipsam est odit placeat totam saepe ea libero error consequuntur earum optio quo ut. Vero quaerat sit dolores, omnis alias nihil qui officia! Assumenda, possimus! Velit repellendus totam voluptas placeat sequi neque molestias harum asperiores tenetur mollitia temporibus vitae quo ab quam eius natus, vel voluptatem enim inventore sunt! In maiores perspiciatis harum architecto error animi quam voluptas ratione tempore, voluptatem laborum temporibus pariatur totam nemo perferendis omnis saepe a quasi ullam tenetur atque? Impedit, necessitatibus porro. Esse nam totam, ipsum harum sit quia dolores laboriosam? Placeat necessitatibus tenetur reiciendis accusantium accusamus voluptatibus in, mollitia quod, reprehenderit excepturi, officiis dolores neque beatae id amet sunt. Eligendi in tenetur ut natus, sequi dolores excepturi quae quo? Voluptas, omnis modi distinctio commodi eaque, deserunt facilis qui dolorum ipsum quam voluptates error eum tempore enim vero sit. Atque accusamus ea aliquam aperiam ducimus, nisi pariatur iste sunt deleniti quasi odit mollitia vitae sequi placeat voluptatem consequatur veniam reiciendis aliquid, dignissimos repellat. Quia nesciunt itaque veniam sit earum minima, consectetur sint amet modi exercitationem, natus recusandae corrupti quo, pariatur ad harum consequatur! Sequi nesciunt doloribus rerum autem? Explicabo blanditiis, soluta magni molestiae maiores, quam a ab ad, veritatis velit illum. Aliquam sunt autem a illo, nesciunt consectetur molestias quia modi eos delectus ipsum necessitatibus corrupti error exercitationem doloremque nostrum obcaecati iusto vitae? Soluta excepturi magni earum sed voluptatum suscipit neque dolorum ratione repellendus nostrum, voluptatem officia atque rerum tempore, vel numquam aliquam voluptatibus libero aperiam ipsa quas perferendis. Blanditiis inventore voluptatum, nostrum quis, ullam eos at dolore, id esse totam sunt illo nulla? Ipsum corporis odio est distinctio dolorem quae ipsam exercitationem sunt asperiores! Magnam, incidunt aspernatur nostrum amet vitae veniam numquam ex quia obcaecati laborum? Labore veniam dolor recusandae non repellat minima cumque, vero eveniet reiciendis voluptatum distinctio id provident libero. Sit, quam excepturi iste optio magnam voluptates, sint tempora itaque cupiditate repellat sapiente quo, nam vitae omnis. Esse dicta nobis repudiandae excepturi minus, dolorem commodi? Tempora beatae veritatis commodi ratione a architecto labore reiciendis voluptas exercitationem? Commodi consequuntur dolorem possimus, accusamus ex repellendus, quibusdam consectetur laborum accusantium rerum voluptatem, velit sequi eligendi eius repudiandae eum at. Fuga numquam possimus labore aliquid fugiat maxime ratione eligendi facilis commodi enim obcaecati ut, ea similique nemo asperiores praesentium explicabo accusantium libero doloremque dolorum quis atque porro soluta corrupti. Sequi vel, voluptatibus fugit hic mollitia minus ab aspernatur, reiciendis ipsam, enim officiis ratione minima? Et explicabo consequatur magnam illum tempora corporis, expedita error, harum iste mollitia dolor quibusdam. Distinctio magnam illo ad quisquam consectetur aut similique id cupiditate vero recusandae in inventore consequatur tenetur, obcaecati quibusdam error, reprehenderit veniam adipisci rem corporis impedit, perspiciatis velit! Dolores consectetur ducimus non, tempore, eum sunt iure rem, beatae illum consequatur sapiente provident fugit officia eos cum! Facilis saepe voluptate magnam temporibus aliquid eos recusandae, velit commodi quia voluptatem, amet aut repellendus labore voluptates, quaerat perspiciatis expedita. Atque, iusto! Accusamus dolorem vero placeat velit maxime fugit necessitatibus repellat, laudantium, dolorum harum, explicabo ea facere reiciendis? Repellat, ipsam. Cumque omnis rerum quae ipsam tempore velit, quia consectetur repellat dolores aliquam qui pariatur nam reprehenderit aut. Animi, soluta nulla, natus totam labore facilis ab saepe voluptatum, dolorum itaque earum impedit. Et minima rem voluptatum, voluptatibus sapiente harum sed distinctio at, blanditiis ipsum omnis corrupti voluptas mollitia assumenda officia, doloribus ut iste vero. Nesciunt autem rem provident et ipsam eligendi explicabo saepe earum suscipit assumenda! Vel dolorum ipsa perspiciatis molestiae minima laudantium accusamus quae, ipsam tempora maxime impedit qui numquam deserunt iusto voluptates laboriosam cumque obcaecati excepturi illum dicta quis eius nulla ad. Architecto tempora, voluptate sequi, eaque cupiditate non facilis doloremque repellat obcaecati ex cumque aliquid numquam autem deserunt modi enim soluta excepturi optio possimus. Blanditiis, similique nihil repellat, est at magnam facere impedit quos, sit quo cumque molestiae! At culpa esse voluptatibus ipsa molestiae possimus pariatur, cumque id cum tempora excepturi? Atque molestias placeat eius, unde asperiores rem sit sunt dolore iste repellat corporis. Nostrum dicta impedit ut, voluptates, mollitia voluptatibus optio culpa aut consequuntur aspernatur veritatis repudiandae aliquid deserunt, quisquam recusandae maxime quae cupiditate reiciendis eveniet possimus nesciunt doloribus assumenda sunt! Nobis minus vitae aliquam voluptatem asperiores dicta ducimus explicabo blanditiis illo eligendi optio unde odio maxime quaerat, alias veritatis magni quidem quod consequuntur molestiae excepturi numquam. Nobis culpa aperiam soluta tenetur! Quod laudantium animi dicta aliquid sed esse odio ipsum odit quibusdam explicabo earum deleniti fuga hic ab tempore voluptatem possimus laborum, quisquam magnam cum doloribus? Delectus suscipit minus, hic praesentium placeat officiis cum nulla error quam ea eius quod consectetur, quia aperiam, enim eum animi quas! Reiciendis, alias? Pariatur tempore harum iure recusandae nobis, culpa voluptatibus amet, fuga consectetur, mollitia et! Beatae qui totam culpa, nostrum ab dicta ipsum, blanditiis neque doloribus laboriosam nobis, commodi deleniti magni impedit et? Explicabo ullam similique autem ex corrupti distinctio accusantium voluptate alias sit tempore vero ut, blanditiis harum quaerat minima! Tempora, eveniet labore a quis aspernatur, ipsam vitae repellendus quasi omnis impedit quod! Voluptatibus ipsa exercitationem eum tenetur provident error facere, adipisci, numquam officiis omnis repellat asperiores dolores quae! Atque saepe aliquid cumque pariatur alias error, minima temporibus odio cum modi velit a accusamus nihil ea ipsam quos quaerat nisi? Pariatur quasi eos eaque similique, dolores voluptates aliquid iusto labore repellendus fugiat repudiandae rem quidem voluptas in debitis neque odit quam esse commodi illo nam sapiente. Mollitia, sequi ipsa libero tenetur similique asperiores quidem quisquam itaque corrupti doloribus veniam corporis cum velit enim facilis vel vero iusto voluptate fugit odit molestias. Dolor facere ipsa nihil consequatur tenetur ea quia eos ex necessitatibus itaque vel quidem provident error hic, possimus accusamus porro deleniti amet perferendis. Non error vel autem impedit dicta ipsum, velit suscipit corporis animi molestiae esse assumenda sapiente consectetur delectus explicabo neque. Repellat, dicta consequuntur.</p>
  </div>
  <div class="round go-top"></div>
  <div class="round play-btn"></div>
  <script src="./js/utils.js"></script>
  <script src="./js/auto-reader.js"></script>
  <script>
    const ar = new AutoReader({
      goTopBtn: document.getElementsByClassName("go-top")[0],
      playBtn: document.getElementsByClassName("play-btn")[0],
    });
  </script>
</body>
</html>

css

common.css

body {
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  font-weight: normal;
}

div {
  box-sizing: border-box;
}

img {
  height: 100%;
}

a {
  text-decoration: none;
}

.list-hd {
  position: fixed; /* 会导致元素变inline-block */
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 44px;
  line-height: 44px;
  background-color: orange;
}

.list-hd h1 {
  font-size: 24px;
  text-align: center;
  color: #fff;
}

.container {
  margin-top: 44px;
}

index.css

.bk-list .item {
  position: relative;
  height: 150px;
  border-bottom: 1px solid #e1e1e1;
}

.bk-list .item a {
  display: block;
  height: 100%;
}

.bk-list .item .bk-pic {
  position: absolute;
  top: 0;
  left: 0;
  height: 150px;
  padding: 10px;
  /* border: 1px solid #eee; */
}

.bk-list .item .bk-info {
  height: 100%;
  margin-left: 118px;
  padding: 10px;
  /* border: 1px solid rgba(107, 11, 107, 0.067); */
  color: #424242;
}

.bk-list .item .bk-info .intro {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bk-list .item .bk-info p {
  margin: 10px 0;
}

detail.css

body {
  position: relative;
}
p {
  line-height: 32px;
}

.round {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  opacity: 0.6;
}

.round:hover {
  opacity: 1;
}

.go-top {
  display: none;
  bottom: 150px;
  right: 30px;
  background: url("../images/rocket.png") no-repeat 0 0/100% 100%;
}

.play-btn {
  bottom: 80px;
  right: 30px;
  background: orange url("../images/play.png") no-repeat 12px 10px/30px 30px;
}

.play-btn.playing {
  background: orange url("../images/pause.png") no-repeat 12px 10px/30px 30px;
}

images

1.jpg

Untitled

pause.png

Untitled

play.png