day7_作业

轮播图1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

        </style>
    </head>
    <body>
        <div id="img1">
            <img src="img/picture-1.jpg"/>
        </div>
        <div id="img2">
            <img src="img/thumb-1.jpg"/>
            <img src="img/thumb-2.jpg"/>
            <img src="img/thumb-3.jpg"/>
        </div>
        
        <script type="text/javascript">
            var img1 = document.querySelector("#img1>img");
            var imgs = ["img/picture-1.jpg","img/picture-2.jpg","img/picture-3.jpg"]
            var img2 = document.querySelectorAll("#img2>img")
            var index = 0;
            var timerId;
            function startIt(){
                timerId = window.setInterval(function(){
                    index %=3;
                    img1.src = imgs[index]
                    index+=1;
                },2000)
            }
            startIt();
            for(var i=0;i<3;i++){
                img2[i].addEventListener("mouseover",function(evt){
                    window.clearInterval(timerId);
                    var nowImg = evt.target||evt.srcElement
                    var num = nowImg.src
                    var a ="img/picture-"+ num.charAt(num.length-5)+".jpg"
                    img1.src = imgs[imgs.indexOf(a)]
                })
                img2[i].addEventListener("mouseout",function(evt){
                    startIt();
                })  
            }
        </script>
    </body>
</html>

轮播图2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            
            
            #picture{
                width:940px;
                height: 430px;
                margin: 50px auto;
                box-sizing: border-box;
                background: url(img/slide-1.jpg)<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            
            
            #picture{
                width:940px;
                height: 430px;
                margin: 50px auto;
                box-sizing: border-box;
                background: url(img/slide-1.jpg) no-repeat;
                position: relative;
                
                
            }
            #picture>ul{
                position: absolute;
                height: 100px;
                width: 100px;
                left: 420px;
                bottom: 0px;
            }
            #picture li{
                font-size: 100px;
                line-height: 100px;
                color: rgba(100,100,100,0.5);
                float: left;
                list-style: none;
            }
            #picture li:first-child{
                color: blue;
            }
        </style>
    </head>
    <body>
        <div id="picture">
            <ul>
                <li class="li">.</li>
                <li>.</li>
                <li>.</li>
                <li>.</li>
            </ul>
        </div>
        <script type="text/javascript">
            var lis = document.querySelectorAll("#picture>ul>li");
            var imgs = ["img/slide-1.jpg","img/slide-2.jpg","img/slide-3.jpg","img/slide-4.jpg"]
            var pic = document.querySelector("#picture");
            var index = 1;
            var timerId;
            function update(){
                for(var i=0;i<lis.length;i++){
                    lis[i].style.color = "rgba(100,100,100,0.5)";
                }
            }
            function startIt(){
                timerId = window.setInterval(function(){
                    update();
                    index %=4;  
                    index+=1;
                    pic.style.backgroundImage ="url(img/slide-"+index+".jpg)";  
                    lis[index-1].style.color = "blue";
                },2000)
            }
            startIt();
            for(var i=0;i<lis.length;i++){
                lis[i].index = i+1
                lis[i].addEventListener("click",changIt);
                lis[i].addEventListener("mouseover",changIt);
                lis[i].addEventListener("mouseout",startIt);
                
                function changIt(evt){
                    window.clearInterval(timerId)
                    update()
                    var li = evt.target;
                    index = li.index;
                    li.style.color = "blue";
                    pic.style.backgroundImage ="url(img/slide-"+li.index+".jpg)";   
                }
            }
        </script>
    </body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 清明小长假结束了,一切又回归正轨,朝九晚五。 今天收到两位小伙伴共四幅作品。 一、雅雅清清的形象思维图和因果分析作...
    lilycat阅读 201评论 0 0
  • 给出一个列表:numbers = [23, 45, 78, 32, 90, 89, 123, 155, 121] ...
    魅影_0d2e阅读 208评论 0 0
  • 今天的作业是为自己的海报写15个标题,运用老师讲到的标题写作的3步。 首先,先确定下海报的选品,本次依然用朋友的羊...
    学会看报实验室阅读 279评论 2 0
  • 因果分析图前几天开脑洞开得差不多了,明天要上班,今天开始回归理性。万事有因果,如何循因导果,如何执果索因,从不同的...
    gsx阅读 174评论 0 0
  • 1.编写一个函数,求1+2+3+...+N 2.编写一个函数,求多个数中的最大值 3.编写一个函数,实现摇色子的功...
    七一欧阅读 273评论 0 5