阶段二day07-作业

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <style type="text/css">
        #big{
            position: relative;
            width: 940px;
            height: 430px;
            margin: 0 auto;
        }
        #small{
            float: left;
            width: 200px;
            height: 50px;
            margin-top: 380px;
            margin-left: 370px;
            z-index: initial;
            }
        .yuan{
            float:left;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-top: 15px;
            margin-left: 25px;
        }
        #big>img{
            position: absolute;
            left: 0;
            z-index: -1;
        }
        
    </style>
    <body>
        <div id="big">
            <img src="img/img0.jpg" >
            <div id="small">
                <div class="yuan"></div>
                <div class="yuan"></div>
                <div class="yuan"></div>
                <div class="yuan"></div>
            </div>
        </div>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let i=0
            function changImg(){
                i%=4
                $('#big>img').attr('src',`img/img${i}.jpg`).fadeOut(500).fadeIn(500)
                $('.yuan').css({
                    'background-color':'green'
                })
                $(`#small>div:eq(${i})`).css({
                    'background-color':'red'
                })
                i+=1
            }
           let timeId=setInterval(changImg,2000)
          $('#big').on('mouseover',()=>{
              clearInterval(timeId)
          })
          $('#big').on('mouseout',()=>{
              timeId=setInterval(changImg,2000)
          })
          for(let j=0;j<4;j+=1){
          $(`#small>div:eq(${j})`).on('mouseover',(evt)=>{
              $('#big>img').attr('src',`img/img${j}.jpg`).fadeOut(500).fadeIn(500)
              $('.yuan').css('background-color','green')
              $(evt.target).css('background-color','red')
          })
          }
        </script>
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容