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

按3月30日的課程,仿寫輪播圖.

    <div class="slideshow">
        <!-- 1. 圖片 -->
        <div class="imgs"></div>
        <!-- 2. 按鈕 -->
        <div class="btns"></div>
      </div>

html頁面的js代碼

 <script type="module">
        // 獲取圖片組的入口,即是圖片元素
        const imgs = document.querySelector('.imgs')
        // 獲取按鈕組的入口,
        const btns = document.querySelector('.btns')
        // console.log(imgs,btns);
        /**
         * 當(dāng)前輪播圖至少需要4個函數(shù)
         * 1.創(chuàng)建圖片組
         * 2.創(chuàng)建按鈕組
         * 3.創(chuàng)建按鈕事件:實現(xiàn)點擊按鈕,圖片切換
         * 4.定時輪播器:間歇式輪播()
         */
         //導(dǎo)入輪播圖模塊slideshow.js
         import slide from './js/slideshow.js'
        //自動加載
        window.onload = function(){
        //1.創(chuàng)建圖片組
         slide.createImg(imgs)
         //2.創(chuàng)建按鈕組
         slide.createBtn(btns)
         //3. 創(chuàng)建按鈕時間:實現(xiàn)圖片切換
         // 因為要拿到索引,所以不適合用事件代理
         // 一個一個單獨添加點擊事件
            ;[...btns.children].forEach(function(btn){
                btn.onclick = function(){
                    slide.switchImg(this,imgs)
                }
            })
      // 4.定時輪播器:間歇式輪播()
      //  const btnsArr = [...btns.children]//聲明按鈕數(shù)組
        //Object.keys(): 返回一個對象中索引組成的數(shù)組(返回對象索引組成的數(shù)組)
        //console.log(Object.keys([13,4,6,7]));返回: ['0', '1', '2', '3']
        // console.log(Object.keys(btnsArr));
        //間歇式定時器.每2秒換一張圖
        setInterval(function(btnsArr,btnKeys){
            console.log(btnsArr,btnKeys);
            slide.timerAuto(btnsArr, btnKeys);
            },
            2000,
            [...btns.children],
            Object.keys([...btns.children])
            )
      }
      </script>

js代碼

// import {imgArr} from './data.js'  //導(dǎo)出
import imgArr from './data.js' //data.js是默認導(dǎo)出,這里可以自定義導(dǎo)出名字
        /**
         * 當(dāng)前輪播圖至少需要4個函數(shù)
         * 1.創(chuàng)建圖片組
         * 2.創(chuàng)建按鈕組
         * 3.創(chuàng)建按鈕事件:實現(xiàn)點擊按鈕,圖片切換
         * 4.定時輪播器:間歇式輪播()
         */
/**
 * 1. 創(chuàng)建圖片組
 */
function createImg(imgs){
// console.log(imgArr.length);
    for(let i=0;i<imgArr.length;i++){
        const img = document.createElement('img')
        //為每個元素添加自定義屬性data-key
        img.dataset.key = imgArr[i].key
        img.src = imgArr[i].src
        const a = document.createElement('a')
        // a.href = imgArr[i].url
        // img.append(a)
        imgs.append(img)
        //為第一個元素添加active屬性
        // if(i==0){
        //     img.classList.add('active')
        // }
        i==0?img.classList.add('active'):''
    }
}
function createBtn(btns){
    for(let i=0;i<imgArr.length;i++){
        const btn = document.createElement('span')
        //為每個按鈕添加自動以屬性data-key
        btn.dataset.key = imgArr[i].key
        btns.append(btn)
        i==0?btn.classList.add('active'):''
    }
}
//3.創(chuàng)建按鈕事件:實現(xiàn)點擊按鈕,圖片切換
function switchImg(btn,imgs){
    //1.點擊按鈕去掉所有按鈕和圖片的激活狀態(tài)
    ;[...btn.parentNode.children].forEach(item =>item.classList.remove('active'))
    ;[...imgs.children].forEach(item=>item.classList.remove('active'))
    //2.根據(jù)當(dāng)前用戶點擊的按鈕設(shè)置為激活狀態(tài)active
    btn.classList.add('active')
    // 3. 設(shè)置當(dāng)前點擊的按鈕的自定義屬性和圖片的自定義屬性相同的圖片顯示
    //根據(jù)當(dāng)前按鈕的key,找到對應(yīng)的圖片
    //btn.dataset == img.dataset.key
    // ;[...imgs.children].forEach(item=>{(item.dataset.key==btn.dataset.key)?item.classlist.add('active'):''})
    const currImg = [...imgs.children].find(item=>item.dataset.key==btn.dataset.key)
    currImg.classList.add('active')
    // console.log(currImg);
}
//4.定時輪播器:間歇式輪播()
function timerAuto(btnsArr,btnKeys){
  //定時器 + 事件派發(fā)
  //setInterval  = dispatchEvent
  //1.從頭部取一個索引,第一個索引
  let key = btnKeys.shift()
  //2.根據(jù)索引,從按鈕組中找到與該索引對應(yīng)的按鈕,給它自動派發(fā)點擊事件
  btnsArr[key].dispatchEvent(new Event('click'))
  //3.將取出的按鈕,再次放入到按鈕數(shù)組的尾部,實現(xiàn)首尾相連
  btnKeys.push(key)
}
//導(dǎo)出,
export default{
    imgArr,
    createImg,
    createBtn,
    switchImg,
    timerAuto
}

效果圖

批改老師：PHPz

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

老師批語：