亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 7
粉絲 0
評論 0
訪問量 3450
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
仿寫課堂的輪播圖案例
P粉276126820
原創(chuàng)
440人瀏覽過

輪播圖

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.       //創(chuàng)建圖片  
  27.     slide.createImgs(imgs)
  28.     //創(chuàng)建按鈕
  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: 'http://ipnx.cn',
  6.   },
  7.   {
  8.     key: 2,
  9.     src: 'images/item2.jpeg',
  10.     url: 'http://ipnx.cn',
  11.   },
  12.   {
  13.     key: 3,
  14.     src: 'images/item3.jpeg',
  15.     url: 'http://ipnx.cn',
  16.   },
  17. ]
  18. ------------------------------------------------------
  19. import imgArr from './data.js'
  21. /**
  22.  * 創(chuàng)建圖片元素
  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 創(chuàng)建按鈕組
  42.  * @param {DOMElement} imgs - 圖片容器
  43.  * @param {DOMElement} btns - 按鈕容器
  44.  */
  45. function createButts(imgs,btns){
  46.     //獲取圖片數(shù)量
  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 創(chuàng)建按鈕事件
  59.  * @param {DOMElement} btn - 當(dāng)前按鈕
  60.  * @param {DOMElement} imgs - 圖片容器
  61.  */
  63. function switchImg(btn,imgs){
  64.     // 去掉所有按鈕圖片的激活狀態(tài)
  65.     ;[...btn.parentNode.children].forEach(btn=>btn.classList.remove('active'))
  66.     ;[...imgs.children].forEach(img=>img.classList.remove('active'))
  67.     //將當(dāng)前用戶正在點擊的按鈕設(shè)置激活狀態(tài)
  68.     btn.classList.add('active')
  69.     //獲取當(dāng)前用戶點擊的圖片
  70.     const curImg = [...imgs.children].find(img=>img.dataset.key===btn.dataset.key)
  71.     //把當(dāng)前圖片設(shè)置激活狀態(tài)
  72.     curImg.classList.add('active')
  74. }
  75. /**
  76.  * @desc 定時輪播器: 間歇式的定時器
  77.  * @param {DOMElement} btnsArr - 按鈕數(shù)組(用來綁定事件)
  78.  * @param {DOMElement} btnKeys - 按鈕的鍵構(gòu)成的數(shù)組
  79.  */
  80. function timePlay(btnsArr,btnKeys){
  82.     let k = btnKeys.shift()
  83.     // 根據(jù)索引,從按鈕組中找到與該索引對應(yīng)的按鈕,給它自動派發(fā)一個點擊事件
  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. /* 圖片適應(yīng) */
  21. .slideshow img {
  22.   width: 100%;
  23.   height: 100%;
  24.   border-radius: 10px;
  26.   /* ? 默認(rèn)全隱藏 */
  27.   display: none;
  28. }
  30. /* 設(shè)置圖片的激活狀態(tài) */
  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. }

效果

批改老師：PHPzPHPz

批改狀態(tài)：合格

老師批語：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請注明地址！如有侵權(quán)、違法，請聯(lián)系admin@php.cn舉報處理！
全部評論 文明上網(wǎng)理性發(fā)言，請遵守新聞評論服務(wù)協(xié)議
0條評論
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費學(xué)