Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 经典轮播图
Blogger Information
Blog 35
fans 0
comment 0
visits 16737
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
经典轮播图
手机用户311660634
Original
424 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=lun, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <style>
  9.         body {
  10.             background-color: #eee;
  11.         }
  12.         /* 轮播图容器设置宽高 */
  13.         .slideshow {
  14.             width: 240px;
  15.             height: 360px;
  16.         }
  17.         /* 图片容器继承父级宽高，如果要改容器宽高直接在父级修改就可以 */
  18.         .slideshow .imgs{
  19.             width: inherit;
  20.             height: inherit;
  21.         }
  22.         /* 图片自适应 */
  23.         .slideshow img{
  24.             width: 100%;
  25.             height: 100%;
  26.             /* 设置图片圆角 */
  27.             border-radius: 10px;
  28.             /* 默认隐藏全部图片 */
  29.             display: none;
  30.         }
  31.         /* 设置图片的激活状态 */
  32.         .slideshow img.active{
  33.             display: block;
  34.         }
  35.         /* 设置鼠标手性 */
  36.         .slideshow img:hover{
  37.             cursor: pointer;
  38.         }
  40.         /* 按钮容器 */
  41.         .slideshow .btns{
  42.             /* 设置块元素 */
  43.             display: flex;
  44.             /* 按钮居中 */
  45.             place-content: center;
  46.             /* 按钮上移到图片内 */
  47.             transform: translate(-40px);
  48.         }
  50.         .slideshow .btns > span{
  51.             /* 设置按钮颜色以及透明度 */
  52.             background-color: rgba(233, 233, 233, 0.5);
  54.             height: 16px;
  55.             width: 16px;
  56.             border-radius: 50%;
  57.             margin: 5px;
  58.         }
  59.         /* 设置默认按钮背景色已经手型 */
  60.         .slideshow .btns > span.active{
  61.             background-color: orangered;
  62.         }
  63.         .slideshow .btns > span:hover{
  64.             cursor: pointer;
  65.         }
  67.     </style>
  68. </head>
  69. <body>
  70.     <!-- 轮播图需要两个容器，一个图片容器，一个按钮容器 -->
  71.     <div class="slideshow">
  72.         <!-- 图片容器 -->
  73.         <div class="imgs"></div>
  74.         <!-- 按钮容器 -->
  75.         <div class="btns"></div>
  76.     </div>
  77.     <script type="module">
  78.         // 获取到图片和按钮容器
  79.         const imgs = document.querySelector('imgs');
  80.         const btns = document.querySelector('btns');
  81.         // 导入方法
  82.         import {createImgs, createBtns, switchImg, timePlay} from './js/lbt.js'
  84.         // 加载成功将按钮和图片直接渲染出来
  85.         window.onload = () => {
  86.             // 先创建图片和按钮组
  87.             createImgs(imgs)
  88.             // 按钮组需要两个参数，因为要让按钮和图片对应起来
  89.             createBtns(imgs, btns);
  90.             // 创建按钮事件，不能绑定在父级上，因为绑定父级，点击会触发所有按钮
  91.             // 吧按钮的放到一个真数组里面，才能用foreach来遍历
  92.             [...btns.children].forEach(function (btn){
  93.                 btn.onclick = function(){
  94.                     // 哪个按钮被点击就显示出和当前按钮对应的图片
  95.                     switchImg(this, imgs);
  96.                 }
  97.             })
  98.         }
  99.         // 定时器需要首位相连，才能实现循环重复播放
  100.         // 拿到按钮和按钮的索引，并且放到数组中
  101.         const btnArr = [...btns.children];
  102.         const btnkeys = object.keys(btns.children);
  104.         // 设置2秒间隔自动切换
  106.         setInterval(function(btnArr,btnkeys){
  107.             timePlay(btnArr,btnkeys);
  108.         }, 2000, btnArr, btnkeys)
  111.     </script>
  112. </body>
  113. </html>
  1. // 图片组，图片需要有一个key来和按钮对应，还需要一个跳转链接
  2. const imgArr = [
  3.     {
  4.       key: 1,
  5.       src: 'static/images/item1.jpeg',
  6.       url: 'https://php.cn',
  7.     },
  8.     {
  9.       key: 2,
  10.       src: 'static/images/item2.jpeg',
  11.       url: 'https://php.cn',
  12.     },
  13.     {
  14.       key: 3,
  15.       src: 'static/images/item3.jpeg',
  16.       url: 'https://php.cn',
  17.     },
  18.   ];
  19. //   创建图片组
  20. function createImgs(imgs){
  21.     // 图片资源比较大，所以建议用文档片段来做
  22.     const frag = new DocumentFragment()
  23.     for (let i = 0;i<imgArr.length;i++){
  24.         // 创建图片元素
  25.         const img = new Image()
  26.         // 添加属性
  27.         // src图片路径
  28.         img.src = imgArr[i].src
  29.         // 给当前循环的图片添加一个data-key
  30.         img.dataset.key = imgArr[i].key
  31.         // 给第一张图片添加一个active,默认显示第一张图片
  32.         if (i===0)img.classList.add('active');
  33.         // 图片被点击，就跳转到当前图片对应的URL
  34.         img.onclick = () => (location.href = imgArr[i].url)
  35.         // 将当前创建的img元素添加到文档片段中
  36.         frag.append(img)
  37.     }
  38.     // 将文档片段添加到图片容器中
  39.     imgs.append(frag)
  40. }
  41. // 创建按钮组
  42. function createBtns(imgs, btns){
  43.     // 计算出所有图片的数量，根据这个来创建相应的按钮数
  44.     // childElementCount拿到子元素的个数，也就是有几张图片，就返回数字几
  45.     let length = imgs.childElementCount;
  46.     for (let i = 0; i < length; i++){
  47.         // 生成span标签
  48.         const btn = document.createElement('span');
  49.         // 按钮设置data-key，要和图片容器的子元素的data-key对应
  50.         btn.dataset.key = imgs.children[i].dataset.key
  51.         // 第一个按钮默认激活
  52.         if(i === 0)btn.classList.add('active')
  53.         // 将按钮添加到按钮容器中
  54.         btns.append(btn)
  55.     }
  56. }
  58. // 按钮点击事件
  59. function switchImg(btn, imgs){
  60.     // 去掉图片和按钮的激活状态
  61.     // 拿到按钮的父级容器，在拿到父级下面所有子元素按钮，并转换成数组来使用foreach
  62.     [...btn.parentNode.children].forEach(btn => btn.classList.remove('active'));
  64.     [...imgs.children].forEach(img => img.classList.remove('active'));
  65.     // 将当前按钮激活
  66.     btn.classList.add('active')
  67.     // 根据当前按钮索引，找到对应的图片
  68.     const currImg = [...imgs.children].find(function (img){
  69.         return img.dataset.key == btn.dataset.key
  70.     })
  71.     // 将当前图片激活显示出来
  72.     currImg.classList.add('active')
  74. }
  76. // 定时播放
  77. function timePlay(btnArr, btnKeys){
  78.     // 头部取一个
  79.     // shift是取出的意思
  80.     let key = btnkeys.shift()
  81.     // 给当前按钮派发一个点击事件
  82.     btnArr[key].dispatchEvent(new Event('click'))
  83.     // 把刚才的按钮在从尾部进入，实现收尾相连
  84.     btnkeys.push(key)
  86.     // * 其实在这里我是有点不懂的，头部取出 0，然后给索引是0的按钮派发点击事件，
  87.     // 然后塞回去，怎么会到最后一个
  89. }
  91. export { createImgs, createBtns, switchImg, timePlay };
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post