美文网首页
图片切换

图片切换

作者: Yuann | 来源:发表于2017-09-21 21:40 被阅读0次
    <body>
    <a href= "http:www.baidu.com" style="margin:10px;display:block" onclick="fn();return false;">切换</a>
    <img id="img" src = "image/1.jpg" width = 400px"/>
    <script>
    //需求:点击a链接,img图片切换(行内式)
    //步骤
    //1.获取事件源
    //2.绑定事件
    //3.书写事件驱动程序
    //1.获取事件源和图片
    var a = document.getElementsByTagName("a")[0];
    var img = document.getElementById("img");
    //2.绑定事件
    a.onclick = function()
    {
    //3.书写事件驱动程序
    img.src = "image/2.jgp";
    //return false的目的是禁止a链接跳转
    return false;
    }
    
    
    var img = document.getElementById("img");
    function fn(){
    img.src = "image/2.jpg";
    }
    </script>
    
    </body>
    

    相关文章

      网友评论

          本文标题:图片切换

          本文链接:https://www.haomeiwen.com/subject/hseasxtx.html