2018-09-26 Day27 - 作业

作者: Deathfeeling | 来源:发表于2018-09-26 20:39 被阅读0次

2018-09-26 Day27 - 作业
Day27如何做课程
(Line)iOS第三方登录_2018-09-26
(iOS收集)00001_两个静态库发生.o冲突_2018-09
Day27作业
2018-09-26
【4班2组】Day26这样做，赚取第一桶金
2018-09-29
【打卡】D27 2017.01.01 27/35 爱丽丝群
Source Insight复制文件路径

一.图片3s自动切换，鼠标事件触发停止切换。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #span{
                color: #008000;
                text-align: center;
                font-size: 20px;
            }
            #pic{
                margin-left: 120px;
            }
        </style>
    </head>
    <body>
        <p id="span">每3s切换一次图片,鼠标放上停止切换，离开时继续切换</p><br/>
        <img src="img/slide-1.jpg" id="pic"/>
        
        <script type="text/javascript">
            var slipeImg = document.getElementById("pic");
            var timer = setInterval(slipe,3000);
            var count = 1;
            slipeImg.addEventListener("mouseover",overSlipe);
            slipeImg.addEventListener("mouseout",outSlipe);
            
            function overSlipe(){
                clearInterval(timer);
            }
            function outSlipe(){
                timer = setInterval(slipe,3000);
            }
            function slipe(){
                if (count == 4){
                    count = 1
                    slipeImg.src="img/slide-" + count + ".jpg";
                }else{
                    count += 1;
                    slipeImg.src="img/slide-" + count + ".jpg";
                }
            }
        </script>
    </body>
</html>

效果：

二、实现上题的功能的前提下，点击小图标可以切换到对应的图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #pic{
                margin-left: 450px;
            }
            #pic_small{
                margin-left: 460px; 
            }
        </style>
    </head>
    <body>
        
        <img src="img/pic1.jpg" id="pic"/>
        <div id="pic_small">
            <img src="img/thumb-1.jpg" id="small1"/>
            <img src="img/thumb-2.jpg" id="small2"/>
            <img src="img/thumb-3.jpg" id="small3"/>
        </div>
        
        <script type="text/javascript">
            var slipeImg = document.getElementById("pic");
            var timer = setInterval(slipe,3000);
            var count = 1;
            slipeImg.addEventListener("mouseover",overSlipe);
            slipeImg.addEventListener("mouseout",outSlipe);
            
            var thumbs = document.querySelectorAll("#pic_small>img");
            thumbs[0].addEventListener("click",fun1);
            thumbs[1].addEventListener("click",fun2);
            thumbs[2].addEventListener("click",fun3);


            function fun1(){
                slipeImg.src="img/pic1.jpg";
            }
            function fun2(){
                slipeImg.src="img/pic2.jpg";
            }   
            function fun3(){
                slipeImg.src="img/pic3.jpg";
            }
            
            function overSlipe(){
                clearInterval(timer);
            }
            function outSlipe(){
                timer = setInterval(slipe,1000);
            }
            function slipe(){
                if (count == 3){
                    count = 1
                    slipeImg.src="img/pic" + count + ".jpg";
                }else{
                    count += 1;
                    slipeImg.src="img/pic" + count + ".jpg";
                }
            }
        </script>
    </body>
</html>

效果：