JS to achieve image switching effects

This example for you to share the JS image switching specific code, for your reference, the specific content is as follows

Knowledge points:

one window.onload Execute after all pages are loaded
2. Get element setting attributes
3. Critical situation judgment

Operation effect:

Click on the previous picture to switch to the next one

code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<style>
  #box{
    width: 1200px;
    margin: 0 auto;
  }
</style>
<body>
  <div>
    < img SRC = "images / alu1. GIF" ALT = >
    <p></p>
    < button > previous < / button >
    < button > next < / button >
  </div>
<script>
  window.onload = function (ev) {
    //1. Get Tags
    var prep = document.getElementById('prep');
    var next = document.getElementById('next');
    var icon = document.getElementById('icon');
    //2. Click
    var currentIndex = 1, minIndex=1, maxIndex=10;
    prep.onclick = function (ev1) {
      if (currentIndex === minIndex){
        currentIndex = maxIndex;
      }else{
        currentIndex--;
      }
      icon.setAttribute ('src ','images / Alu' + currentindex + '. GIF');
    };
    next.onclick = function (ev1) {
      if (currentIndex === maxIndex){
        currentIndex = minIndex;
      }else {
        currentIndex++;
      }
      icon.setAttribute ('src ','images / Alu' + currentindex + '. GIF');
    }
  }
</script>
</body>
</html>

The above is the whole content of this article, I hope to help you learn, and I hope you can support developer more.

JS to achieve image switching effects

Recommended Today

Redis and Memcache