仿写课堂的轮播图案例

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
轮播图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. }
效果

【转自：响水网站制作 http://www.1234xp.com/xiangshui.html 网络转载请说明出处】
更多阅读