首先看下效果：[简易图片切换示例][1]

下面看下整个的代码

html部分

    <!-- 链接部分包含在ul中 -->
    <ul id="pic">
        <li><a target="_blank" href="http://obtw9lzb6.bkt.clouddn.com/16-8-27/48266517.jpg" onmouseover="clickPic(this); return false;" title="Change your mobile back to school up 70% off deal!">图片1</a></li>
        <li><a target="_blank" href="http://obtw9lzb6.bkt.clouddn.com/16-8-27/61302943.jpg" onmouseover="clickPic(this); return false;" title="The Rio Games Mystic Energy Clearance Crazy Flash Sale Is Here!">图片2</a></li>
        <li><a target="_blank" href="http://obtw9lzb6.bkt.clouddn.com/16-8-27/7737739.jpg" onmouseover="clickPic(this); return false;" title="Time Limit Panic Buying: Flash Sale 76% OFF!!">图片3</a></li>
    </ul>
    <!-- 清除上面li的浮动 -->
    <div style="clear: both;"></div>
    <!-- 图片占位符 -->
    ![](http://upload-images.jianshu.io/upload_images/2929817-8e2f4a2bd5670666.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    <!-- title占位符 -->
    <p id="imgTitle">image title</p>

Javascipt部分

    function clickPic(whichpic){
        var ahref = whichpic.getAttribute("href");                  //获取A标签中图像的位置
        var img = document.getElementById("placeholder");           //获取占位符图像的ID
        img.setAttribute("src",ahref);                              //修改占位符图像的src参数
        var p_title = document.getElementById("imgTitle");          //获取P描述的ID
        var atitle = whichpic.getAttribute("title");                //获取A标签中title的位置
        p_title.firstChild.nodeValue = atitle;                      
        //因为<p></p>中间的文本内容是P的第一个子节点，可以使用childNodes[0]、firstChild表示。nodeValue：改变一个文本节点的值
    }

css部分

    body{background: url(http://obtw9lzb6.bkt.clouddn.com/16-8-27/81721495.jpg) top center repeat;margin-top: 4%;}
    a{text-decoration: none;}
    #mid{width: 30%;margin: 0 auto;}
    ul{margin: 0;padding: 0;}
    ul li{list-style: none; float: left; width: 33.33%;text-align: center;margin: 10px auto 5px;}
    ul li a{background: white;padding: 6px 15px;border-radius:5px;color: black;border:1px dashed #ADADAD;}
    #placeholder{border:1px dashed #ADADAD; width:100%;padding:5px 0;background:white ;margin-top: 20px;}
    #imgTitle{background: #000000;color: white;border:1px dashed #ADADAD; padding: 5px 0;text-align: center;}

没有太多说明，注释已经比较清楚的了，第一次学习javascipt，难免有些地方写的不够好甚至写错的，还请多多指教！
[1]: http://ruofeiblog.com/2016/08/27/%E7%AE%80%E6%98%93%E5%9B%BE%E7%89%87%E5%88%87%E6%8D%A2%E7%A4%BA%E4%BE%8B/