简单的JS切换图片功能

我想做一个简单的JS切换图片的功能，并且在切换图片的同时把图片描述也改变了
但是只能切换图片不能改变描述

<body>
    <section>
      <h2>JS切换图片</h2>
        <ul class="pictable" id="img_gallert">
        <li><a href="img/1.jpg"  title="this picture is beautiful"><img class="picbox" src="img/1.jpg" alt=""></a></li>
        <li><a href="img/2.jpg"  title="this picture is beautiful"><img class="picbox" src="img/2.jpg" alt=""></a></li>
        <li><a href="img/3.jpg"  title="this picture is beautiful"><img class="picbox" src="img/3.jpg" alt=""></a></li>
        <li><a href="img/4.jpg"  title="this picture is beautiful"><img class="picbox" src="img/4.jpg" alt=""></a></li>
    </ul>
    <p id="pic_description">图片描述</p>
    <img src="https://b-ssl.duitang.com/uploads/item/201408/04/20140804204624_xSeGA.png" id="placeholder" alt="img fult">
    </section>
    <section>
      <h2>childNodes属性</h2>
      <p>显示body的子元素个数</p>
    </section>
    <script src="js/index.js" charset="utf-8"></script>
  </body>


----------


//JS代码在这里
window.onload=prepareGallery;
function prepareGallery(){
  //找到图片集
  var gallery=document.getElementById("img_gallert");
  // 图片集的a元素节点
  var link=gallery.getElementsByTagName("a");
  // 遍历节点
  for(var i=0;i<link.length;i++){
    link[i].onclick=function(){
        showPic(this);
        ***// showPic_description(this);这个函数无法使用***
        return false;

    };
  };
};
function showPic(whichpic){
    //改变图片
  var source =  whichpic.getAttribute("href");
  var placeholder=document.getElementById("placeholder");
  placeholder.setAttribute("src",source);
};
//更改图片描述
function showPic_description(whichpic){
  var text=whichpic.getAttribute("title");
  var pic_desciption=document.getElementById("pic_desciption");
  pic_desciption.childNodes[0].nodeValue=text;
};

图片描述

javascript html

阅读 4.4k

5 个回答

Hutchins

✓ 已被采纳

function showPic(whichpic){
        
        //改变图片
        var source =  whichpic.getAttribute("href");
        var placeholder= document.getElementById("placeholder");
        placeholder.setAttribute("src",source);
        //改变图片描述        
        showPic_description(whichpic);//需要调用
    };
    function showPic_description(whichpic){
        var text=whichpic.getAttribute("title");
        //你这里pic_description写错了
        var pic_description=document.getElementById("pic_description");
        pic_description.childNodes[0].nodeValue=text;
      };

呆头呆脑丶

6873

发布于
2017-07-14

更新于
2017-07-14

代码中没调用 showPic_description() 这个函数啊，当然不会变

游泳的鱼

981216

发布于
2017-07-14

function showPic(whichpic){

document.getElementById("placeholder").src = whichpic.href;//改变图片
document.getElementById("pic_description").innerHTML = whichpic.title;//改变文字

}

treeandgrass

1.3k32343

发布于
2017-07-14

更新于
2017-07-14

样式自己设

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片展示</title>
<style>

</style>

</head>

<body>
    <div class="container">
        <p>图片切换</p>
        <div>
            <ul>
                <li><img alt="图片1"  src="./1.jpg"/></li>
                <li><img alt="图片2" src="./2.jpg"/><li>
                <li><img alt="图片3" src="./3.jpg"/></li>
                <li><img alt="图片4" src="./4.jpg"/></li>
            <ul>
        </div>
        <p>图片展示</p>
        <div><img id="imgshow" alt="图片1" src="./1.jpg"></div>
    </div>
    
    <script>
        var ul = document.getElementsByTagName('ul')[0];
        var img=document.getElementById('imgshow');
        ul.addEventListener('click',function(event){
            img.setAttribute('src',event.target.src);
            img.setAttribute('alt',event.target.alt);
        });
    </script>
    
</body>
</html>