Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 仿写课堂的轮播图案例
Blogger Information
Blog 7
fans 0
comment 0
visits 2139
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
仿写课堂的轮播图案例
P粉276126820
Original
263 people have browsed it

轮播图

html

  1. <html lang="zh-CN">
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <link rel="stylesheet" href="./style.css">
  8. </head>
  9. <body>
  10.     <div class="slideshow">
  11.         <div class="imgs">
  13.         </div>
  14.         <div class="btns">
  16.         </div>
  17.     </div>
  18.     <script type="module">
  19.     import slide from './js/slideshow.js'
  21.     const imgs = document.querySelector('.imgs')
  23.     const btns = document.querySelector('.btns')
  25. window.onload= function(){
  26.       //创建图片  
  27.     slide.createImgs(imgs)
  28.     //创建按钮
  29.     slide.createButts(imgs,btns)
  30.         //为每个按钮添加点击事件
  31.     ;[...btns.children].forEach(btn=>{
  32.         btn.onclick = function(){
  33.             slide.switchImg(btn,imgs)
  34.         }
  35.     }
  37.     )
  38.     // 间歇式定时器,第2秒换一张图片
  39.     setInterval(
  40.         function (btnsArr,btnKeys){
  41.             slide.timePlay(btnsArr,btnKeys)
  42.         },
  43.         3000
  44.         ,
  45.         //获取按钮组
  46.        [...btns.children]
  47.         ,
  48.         //获取按钮组键值
  49.        Object.keys([...btns.children]) 
  50.     )
  51. }
  52.     </script>
  53. </body>
  54. </html>

JS

  1. export default [
  2.   {
  3.     key: 1,
  4.     src: 'images/item1.jpeg',
  5.     url: 'https://www.php.cn',
  6.   },
  7.   {
  8.     key: 2,
  9.     src: 'images/item2.jpeg',
  10.     url: 'https://www.php.cn',
  11.   },
  12.   {
  13.     key: 3,
  14.     src: 'images/item3.jpeg',
  15.     url: 'https://www.php.cn',
  16.   },
  17. ]
  18. ------------------------------------------------------
  19. import imgArr from './data.js'
  21. /**
  22.  * 创建图片元素
  23.  * @param {DOMElement} imgs --图片容器
  24.  */
  25. function createImgs(imgs){
  26.     const frag = new DocumentFragment()
  27.     for(let i=0 ; i<imgArr.length ; i++){
  28.         const img =document.createElement('img')
  29.         img.src=imgArr[i].src
  30.         img.dataset.key = imgArr[i].key
  32.         if(i===0)img.classList.add('active')
  34.         img.onclick = () => (location.href = imgArr[i].url)
  35.         frag.append(img)
  36.     }
  37.     imgs.append(frag)
  38. }
  40. /**
  41.  * @desc 创建按钮组
  42.  * @param {DOMElement} imgs - 图片容器
  43.  * @param {DOMElement} btns - 按钮容器
  44.  */
  45. function createButts(imgs,btns){
  46.     //获取图片数量
  47.     let length = imgs.childElementCount
  48.     console.log(length);
  49.     for(let i=0 ; i<length; i++){
  50.         const btn = document.createElement('span')
  51.         btn.dataset.key = imgs.children[i].dataset.key
  52.         if(i===0)btn.classList.add('active')
  53.         btns.append(btn)
  54.     }
  55. }
  57. /**
  58.  * @desc 创建按钮事件
  59.  * @param {DOMElement} btn - 当前按钮
  60.  * @param {DOMElement} imgs - 图片容器
  61.  */
  63. function switchImg(btn,imgs){
  64.     // 去掉所有按钮图片的激活状态
  65.     ;[...btn.parentNode.children].forEach(btn=>btn.classList.remove('active'))
  66.     ;[...imgs.children].forEach(img=>img.classList.remove('active'))
  67.     //将当前用户正在点击的按钮设置激活状态
  68.     btn.classList.add('active')
  69.     //获取当前用户点击的图片
  70.     const curImg = [...imgs.children].find(img=>img.dataset.key===btn.dataset.key)
  71.     //把当前图片设置激活状态
  72.     curImg.classList.add('active')
  74. }
  75. /**
  76.  * @desc 定时轮播器: 间歇式的定时器
  77.  * @param {DOMElement} btnsArr - 按钮数组(用来绑定事件)
  78.  * @param {DOMElement} btnKeys - 按钮的键构成的数组
  79.  */
  80. function timePlay(btnsArr,btnKeys){
  82.     let k = btnKeys.shift()
  83.     // 根据索引,从按钮组中找到与该索引对应的按钮,给它自动派发一个点击事件
  84.     btnsArr[k].dispatchEvent(new Event('click'))
  85.     btnKeys.push(k)
  87. }
  88. export default {createImgs,createButts,switchImg,timePlay}

css

  1. body {
  2.   background-color: #eee;
  3. }
  5. /* 轮播图容器 */
  6. .slideshow {
  7.   width: 240px;
  8.   height: 360px;
  9.   /* em / rem  */
  10. }
  12. /* 图片容器 */
  13. .slideshow .imgs {
  14.   width: inherit;
  15.   height: inherit;
  16.   /* width: 100%;
  17.   height: 100%; */
  18. }
  20. /* 图片适应 */
  21. .slideshow img {
  22.   width: 100%;
  23.   height: 100%;
  24.   border-radius: 10px;
  26.   /* ? 默认全隐藏 */
  27.   display: none;
  28. }
  30. /* 设置图片的激活状态 */
  31. .slideshow img.active {
  32.   display: block;
  33. }
  35. .slideshow img:hover {
  36.   cursor: pointer;
  37. }
  39. /* ------ 按钮容器 ------- */
  41. /* 按钮容器 */
  42. .slideshow .btns {
  43.   display: flex;
  44.   place-content: center;
  46.   position: relative;
  47.   top: -40px;
  49.   /* transform: translateY(-40px); */
  50. }
  52. .slideshow .btns > span {
  53.   background-color: rgba(48, 148, 48, 0.8);
  54.   height: 16px;
  55.   width: 16px;
  56.   border-radius: 50%;
  57.   margin: 5px;
  58. }
  60. .slideshow .btns > span.active {
  61.   background-color:crimson;
  62. }
  64. .slideshow .btns > span:hover {
  65.   cursor: pointer;
  66. }

效果

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