首先看下效果：[簡易圖片切換示例][1]

下面看下整個的代碼

html部分

    <!-- 鏈接部分包含在ul中 -->
    <ul id="pic">
        <li><a target="_blank"  onmouseover="clickPic(this); return false;" title="Change your mobile back to school up 70% off deal!">圖片1</a></li>
        <li><a target="_blank"  onmouseover="clickPic(this); return false;" title="The Rio Games Mystic Energy Clearance Crazy Flash Sale Is Here!">圖片2</a></li>
        <li><a target="_blank"  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標(biāo)簽中圖像的位置
        var img = document.getElementById("placeholder");           //獲取占位符圖像的ID
        img.setAttribute("src",ahref);                              //修改占位符圖像的src參數(shù)
        var p_title = document.getElementById("imgTitle");          //獲取P描述的ID
        var atitle = whichpic.getAttribute("title");                //獲取A標(biāo)簽中title的位置
        p_title.firstChild.nodeValue = atitle;                      
        //因?yàn)?lt;p></p>中間的文本內(nèi)容是P的第一個子節(jié)點(diǎn)赎线，可以使用childNodes[0]、firstChild表示序宦。nodeValue：改變一個文本節(jié)點(diǎn)的值
    }

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;}

沒有太多說明婶熬，注釋已經(jīng)比較清楚的了两疚，第一次學(xué)習(xí)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/