undefinedfix
Sign in

Simple JS switching picture function

user617903 edited in Sat, 27 Mar 2021

I want to do a simple JS function of switching pictures, and change the picture description while switching pictures, but I can only switch pictures, not the description

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

图片描述

5 Replies
freeeflyer
commented on Sat, 27 Mar 2021
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;
      };
lpexg
commented on Sun, 28 Mar 2021

Showpic is not called in the code_ Description () this function, of course, will not change

thexiv
commented on Sun, 28 Mar 2021

function showPic(whichpic){

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

}

slvrsky07
commented on Sun, 28 Mar 2021
Design your own style
<!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>
Amer
commented on Sun, 28 Mar 2021

Your picture description is the same, how do you make sure there is no switch, ha ha

lock This question has been locked and the reply function has been disabled.