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>
        <!-- 三张图循环播放，当鼠标停留在图片上时一直停留当前图片 -->
        <!-- 在下面有小图，当鼠标停留小图显示小图对应的大图 -->
        
        <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")
            // 给标签添加事件
            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>
document-homework01

推荐阅读更多精彩内容
