DAY26作业 切换图片 闪烁图 轮播图

作业1 切换图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>换图片</title>
    </head>
    <body>
        <div id="div1">
            <img id="bigImg" src="img/picture-1.jpg"/>
        </div>
        <div id="div2">
            <img class="smallImg" id="1" src="img/thumb-1.jpg"/>
            <img class="smallImg" id="2" src="img/thumb-2.jpg"/>
            <img class="smallImg" id="3" src="img/thumb-3.jpg"/>
        </div>
    </body>
</html>

<script type="text/javascript">
    
    pictureMessage = [
        {id:1,big_img:"img/picture-1.jpg"},
        {id:2,big_img:"img/picture-2.jpg"},
        {id:3,big_img:"img/picture-3.jpg"}
    ]
    
    function changeImg(){
        imgNode = document.getElementById("bigImg")
        for(x=0;x<pictureMessage.length;x++){
            if (this.id == pictureMessage[x].id){
                imgNode.src = pictureMessage[x].big_img
            }
        }
    }
    
    imgNodes = document.getElementsByClassName("smallImg")
    for (x=0;x<imgNodes.length;x++){
        imgNode = imgNodes[x]
        imgNode.onmouseover = changeImg
    }
    
    
</script>

效果图：

homework1 (1).png
homework1(2).png

作业二 闪烁图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box1{
                margin-left: 300px;
                margin-top: 50px;
                height: 400px;
                width: 900px;
                border: 1px solid black;
            }
            
            .btn{
                width: 200px;
                height: 60px;
                background-color: orangered;
                color: white;
                font-size: 20px;
            }
            .btn:focus{
                outline: 0;
            }
            #box2{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="box1">
            
        </div>
        <div id="box2">
            <button id="add" class="btn" onclick="addDiv()">添加</button>
            <button id="twinkle" class="btn" >闪烁</button>
        </div>
        
    </body>
</html>

<script type="text/javascript" >
    addNode = document.getElementById("add")
    box1Node = document.getElementById("box1")
    
    function randomColor(){
    red = parseInt(Math.random()*255)
    green = parseInt(Math.random()*255)
    blue = parseInt(Math.random()*255)
    return "rgb("+red+","+green+","+blue+")"
    }

    
    function addDiv(){
        smallDiv = document.createElement("div")
        smallDiv.style.width = "90px"
        smallDiv.style.height = "100px"
        smallDiv.style.backgroundColor = randomColor()
        smallDiv.style.float = "left"
        smallDiv.className = "smallDiv"
        smallDivs = document.getElementsByClassName("smallDiv")
        firstNode = box1Node.firstChild
        if(firstNode == null){
            box1Node.appendChild(smallDiv)
        }
        
        
        if (smallDivs.length == 40){
            smallDivs[smallDivs.length-1].remove()
            box1Node.insertBefore(smallDiv,firstNode)   
        }else{
            box1Node.insertBefore(smallDiv,firstNode)
        }
    }
    
    twinkleNode = document.getElementById("twinkle")
    twinkleNode.onclick = twinkleDiv
    
    function twinkleDiv(){
        console.log(twinkleNode.innerHTML)
        
        if(twinkleNode.innerHTML == "停止"){
            clearInterval(t1)
            twinkleNode.innerHTML = "闪烁"
            return
        }
        
        if(twinkleNode.innerHTML == "闪烁"){
            smallDivs = document.getElementsByClassName("smallDiv")
            t1 = setInterval(function(){
                for (x=0;x<smallDivs.length;x++){
                smallDiv = smallDivs[x]
                smallDiv.style.backgroundColor = randomColor()
                console.log(smallDiv)
            }
            x = 0
        },1000)
        }       
        
        twinkleNode.innerHTML = "停止"
        
        
    }
    

    
</script>

效果图：


homewoke2(1).png

homework2(2).png

作业三 轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #img{
                position: relative;
                
            }
            
            .choose{
                
                border-radius: 50%;
                width: 30px;
                height: 30px;
                font-size: 20px;
                background-color: rgba(0,0,0,0);
                margin-left:20px ;
            }
            
            .choose:focus{
                outline: 0;
            }
            
            #box2{
                position: absolute;
                left: 400px;
                top: 400px;
            }
            
            
        </style>
    </head>
    <body>
        
        <div id="box1">
            <img id="img" src="img/slide-1.jpg"/>
        </div>
        
        <div id="box2">
            <button class="choose" id="1"> </button>
            <button class="choose" id="2"> </button>
            <button class="choose" id="3"> </button>
        </div>
    </body>
</html>

<script type="text/javascript">
    pictureMessage = [
        {id:1,img:"img/slide-1.jpg"},
        {id:2,img:"img/slide-2.jpg"},
        {id:3,img:"img/slide-3.jpg"}
    ]
    
    
    imgNode = document.getElementById("img")
    
    index = 0
    setInterval(function(){
        console.log(index)
        imgNode.src = pictureMessage[index].img
        if(index == pictureMessage.length-1){
            index = 0
        }else{
            index++
        }
    },2000)
    
    btnNodes = document.getElementsByClassName("choose")
    for (x=0;x<btnNodes.length;x++){
        btnNode = btnNodes[x]
        btnNode.onmousemove = changeImg
    }
    
    function changeImg(){
        for (x=0;x<pictureMessage.length;x++){
            if(pictureMessage[x].id == this.id){
                imgNode.src = pictureMessage[x].img
            }
        }
    }
    
</script>

效果图：


homewok3(1).png

homewok3(2).png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容