document-homework01

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                /* border: solid #000000; */
            }
            body{
                width: 960px;
                height: 500px;
                margin: 0 auto;
                margin-top: 30px;
            }
            #adv>img{
                
                margin-left:310px;
                /* margin: 0 auto; */
            }
            #advSmall>img:first-child{
                margin-left:400px;
            }
            
        </style>
    </head>
    <body>
        <!-- 三張圖循環(huán)播放，當(dāng)鼠標(biāo)停留在圖片上時一直停留當(dāng)前圖片 -->
        <!-- 在下面有小圖，當(dāng)鼠標(biāo)停留小圖顯示小圖對應(yīng)的大圖 -->
        
        <div id="adv">
            <img src="img/big1.jpg" alt="" >
        </div>
        <div id="advSmall">
            <img src="img/small11.jpg" alt="">
            <img src="img/small22.jpg" alt="">
            <img src="img/small33.jpg" alt="">
        </div>
        
        <script type="text/javascript">
            let image = document.querySelector("#adv>img")
            // 給標(biāo)簽添加事件
            image.addEventListener('mouseover',()=>{
                clearInterval(timerId)
            })
            image.addEventListener('mouseout',()=>{
                timerId = setInterval(function () {
                    image.src = `${list[i]}`
                    i += 1
                    if(i == list.length){
                        i = 0
                    }   
                },2000)
            })
                
            let i = 0
            let list = ['img/big1.jpg',
                'img/big2.jpg',
                'img/big3.jpg']
            
            let timerId = setInterval(function () {
                image.src = `${list[i]}`
                i += 1
                if(i == list.length){
                    i = 0
                }
            },1000)
            
            let imageSmalls = document.querySelectorAll('#advSmall>img')
            for( let imageSmall of imageSmalls){
                let list2 = {'img/small11.jpg':'img/big1.jpg','img/small22.jpg':'img/big2.jpg','img/small33.jpg':'img/big3.jpg'} 
                let mo = imageSmall.addEventListener('mouseover',()=>{
                    
                    console.log(`${imageSmall.src}`)
                    let a = `${imageSmall.src}`.slice(-15)
                    image.src = `${list2[a]}`
                    // clearInterval(timerId)
                })
                window.mo = mo
            }
        </script>
        
    </body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容