JS realizes the automatic playback effect of pictures

This article shares the specific code of JS to achieve the automatic playback effect of pictures for your reference. The specific content is as follows

JS realizes automatic playback of pictures

1. Look at the renderings first

2. Complete code

<!DOCTYPE html>
<html>
<head>
 <style>
  /* Define styles */
  body{
   margin: 5% 30%;
  }
  .bannerimage{width:700px;height:400px;float:left;background-size:100% 100%;color:#fff;box-shadow: 0 0 12px 2px #142732;}
  .box{width:700px;height:400px;margin:0px auto;overflow: hidden;}
        /* The width of the box is the number of imgs multiplied by the width of the bannerimage*/
  .img-g{width:4900px;height:400px;position:relative;}
  .img-g img{float:left;width:700px;height:400px;}
  .button-g{position:relative;top:-35px;text-align:center;}
  .button-g span{display:inline-block;position:relative;z-index:10;width:10px;height:10px;margin:0 5px;border-radius:100%;cursor: pointer;}
 </style>
 
 <script type="text/javascript" src="js/jquery.js"></script>
 
 <script type="text/javascript">
 $(function () {
     // Implement automatic playback var p=document.getElementsByClassName('img-g')[0];
  var button = document.querySelectorAll('.button-g span')
  // Set the playback time to 3 seconds window.timer=setInterval(move,3000);
  // Carousel settings function move(){
      // bannerimage width multiplied by the number of images if(parseInt(p.style.left)>-4200){
       // Keep the width the same as bannerimage: 700
    p.style.left=parseInt(p.style.left)-700+'px'
    p.style.transition='left 1s';
    tog(-Math.round(parseInt(p.style.left)/700))
    if (parseInt (p.style.left) <= -4200) {
     setTimeout(function(){
      tog(0)
      p.style.left='0px'
      p.style.transition='left 0s';
     },1000)
    }
   }else{
    p.style.left='0px'
    p.style.transition='left 0s';
   }
  }
 
  //Set the small dot for(var i=0;i<button.length;i++){
   // button[i].style.backgroundColor='#eee';
   button[i].onclick=function(){
    p.style.left=-700*this.getAttribute('data-index')+'px'
    tog(this.getAttribute('data-index'))
    clearInterval(window.timer)
    window.timer=setInterval(move,3000);
   }
  }
  //Set the small dot function tog(index){
   if(index>5){
    tog(0);
    return;
   }
   for(var i=0;i<button.length;i++){
    button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
   }
   button[index].style.backgroundColor='rgb(255, 255, 255)';
  }
 
  // Mouse over event p.onmouseover=function(){
   clearInterval(window.timer)
  }
        // Mouse removal event p.onmouseout=function(){
   window.timer=setInterval(move,3000);
  }
 });
 </script>
</head>
<body> 
 <div class="bannerimage">
  <div class='box'>
   <div class='img-g' style='left:0px;transition:left 1s;'>
    <img src="images/img_1.jpg" alt="1">
    <img src="/images/img_2.jpg" alt="2">
    <img src="/images/img_3.jpg" alt="3">
    <img src="/images/img_4.jpg" alt="4">
    <img src="/images/img_5.jpg" alt="5">
    <img src="/images/img_6.jpg" alt="6">
    <img src="/images/img_1.jpg" alt="1">
   </div>
   <div class='button-g'>
    <span data-index='0' style="background-color: #eeeeee"></span>
    <span data-index='1' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    <span data-index='2' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    <span data-index='3' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    <span data-index='4' style="background-color: rgba(255, 255, 255, 0.5)"></span>
    <span data-index='5' style="background-color: rgba(255, 255, 255, 0.5)"></span>
   </div>
  </div>
 </div>
</body>
</html>

3. Key code explanation

3.1. CSS setting notes: The width of img-g is: the number of imgs multiplied by the width of bannerimage, as follows:

.img-g{width:4900px;height:400px;position:relative;}

3.2. Carousel constants and event settings

Constant 1 is set to the width of bannerimage multiplied by the number of images, as follows:

if (parseInt(p.style.left)>-4200){}

Constant 2 is set to keep the width of bannerimage consistent (700), as follows:

p.style.left=parseInt(p.style.left)-700+'px'

Small dot display settings:

//Set the small dot for(var i=0;i<button.length;i++){
 button[i].style.backgroundColor='#eee';
 button[i].onclick=function(){
     p.style.left=-700*this.getAttribute('data-index')+'px'
     tog(this.getAttribute('data-index'))
     clearInterval(window.timer)
     window.timer=setInterval(move,3000);
 }
}
// Set the small dot click event function tog(index){
    //Number of dotsif(index>5){
  tog(0);
  return;
 }
 for(var i=0;i<button.length;i++){
        // Default dot display color button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
 }
    // The display color of the current dot button[index].style.backgroundColor='rgb(255, 255, 255)';
}

Mouse event: Stop playing when the mouse is moved over, and play after 3 seconds when the mouse is removed.

// Mouse over event p.onmouseover=function(){
 clearInterval(window.timer)
}
// Mouse removal event p.onmouseout=function(){
 window.timer=setInterval(move,3000);
}

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

js manually plays pictures to achieve picture carousel effect
JS realizes the effect of playing multiple pictures in turn
javascript control picture playback implementation code
JS special effects to achieve automatic and controllable image playback
JavaScript+html5 to achieve flash-like scrolling playback of pictures
How to use javascript to realize the looping and gradually displaying of pictures
js to achieve slide show picture sample code
JavaScript control picture playback code
A cool picture player js focus effect code
js Sina's picture playback picture rotation effect code

<<: Pitfalls encountered when installing MySQL 8.0.18 compressed package and resetting forgotten passwords

>>: Summary of some related operations of Linux scheduled tasks