Button to change image-CodePudding

I want to make that when pressed left or right button shows up this image images/2header-pic.jpg with jquery.

I tried some code from here that I found, but nothing works. My code is:

Edit: Added some more css and html code maybe it doesn`t work because of my other code.

HTML

 <div id="header-info">
            <div >
                <div >
                <span id="infoimg-left"><button id="infoimg-left-button"><i  ></i></button></span>
                <img src="images/headerinfoimg.jpg" id="infoimg-id" >
                <span id="infoimg-right"><i  ></i></span>
                </div>
                <p>
 TEXT
                </p>
            </div>
        </div>

CSS

#header-info {
    width: 100%;
    color: #fffffe;
    display: flex;
    background-color: #ff8906;
}

.header-info-text1 {
    top: 50%;
    position: absolute;
    float: left;
    transform: translateY(-50%);
    background-color: #ff8906;
    width: 100%;

}

.header-info-text1 p {
    margin: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
}

.infoimg {
    float: right;
    width: calc(50%);
    margin: -20px calc(5%);
    
}

#infoimg-left {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: calc(48%);
    z-index: 5;
    background-color: rgba(0, 0, 0, 0.35);
    padding: 3px;
    border-radius: 80px;
    width: 40px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    color: #fffffe;
    border: none;
}

CodePudding user response：

You can do this with JQuery iusing the click method to handle click events.

The image is changed by updating the "src" attribute. Note that you need to add some random number otherwise the image won't change because the browser will use the one cached.

Here's a demo.

$("#infoimg-left").click(function() {
  console.log("Handler for .click() called.");
  var src = "https://picsum.photos/200"   "?"   Math.random();
  console.log("new image:", src);
  $("#infoimg-id").attr("src", src);
});

#infoimg-left {
  position: absolute;
  transform: translateY(-50%);
  top: 50%;
  left: calc(48%);
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.35);
  padding: 3px;
  border-radius: 80px;
  width: 40px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  color: #fffffe;
  border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <span id="infoimg-left"><button id="infoimg-left-button"><i  ></i></button></span>
  <img src="images/headerinfoimg.jpg" id="infoimg-id" >
  <span id="infoimg-right"><i  ></i></span>
</div>

CodePudding user response：

Create array of path to images:

    
    // create array of images urls 
    const images = [
      'https://cdn.britannica.com/67/19367-050-885866B4/Valley-Taurus-Mountains-Turkey.jpg',
      'https://cdn.unenvironment.org/2022-09/nicolai-kramer-unsplash.jpg',
      'https://thumbs.dreamstime.com/b/idyllic-summer-landscape-clear-mountain-lake-alps-45054687.jpg'
    ]
    
    // create index number
    let idxImg = 0;
    
    // define img element
    const imgNode = document.querySelector('img');
    
    // set default images
    imgNode.src = images[idxImg];
    
    // listen click on button
    const btn = document.getElementById('next');
    btn.addEventListener('click', () => {
      idxImg  ;
      idxImg = idxImg >= images.length ? 0 : idxImg;
      imgNode.src = images[idxImg];
    })

img {
  width: 200px;
}

<img src="">
<div>
  <button id='next'>NEXT</button>
</div>