JS realizes the automatic playback effect of pictures

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

Recommend

Common considerations for building a Hadoop 3.2.0 cluster

One port changes In version 3.2.0, the namenode p...

Detailed discussion of the character order of mysql order by in (recommended)

//MySQL statement SELECT * FROM `MyTable` WHERE `...

Detailed explanation of Nginx's connection limit configuration for IP addresses in a network segment

The so-called connection limit in Nginx is actual...

Detailed tutorial on installing PHP and Nginx on Centos7

As the application of centos on the server side b...

A brief understanding of the three uses of standard SQL update statements

1. Environment: MySQL-5.0.41-win32 Windows XP Pro...

How to view MySQL links and kill abnormal links

Preface: During database operation and maintenanc...

Detailed process of modifying hostname after Docker creates a container

There is a medicine for regret in the world, as l...

How to write HTML head in mobile device web development

Copy code The code is as follows: <head> &l...

Use MySQL to open/modify port 3306 and open access permissions in Ubuntu/Linux environment

Operating system: Ubuntu 17.04 64-bit MySQL versi...

Introduction to JavaScript array deduplication and flattening functions

Table of contents 1. Array flattening (also known...

Solution to the problem that MySql always pops up the mySqlInstallerConsole window

MySql always pops up a MySQLInstallerConsole.exe ...

Vue3 Vue CLI multi-environment configuration

Table of contents 1. Introduction 2. Switching 1....

Vue realizes the card flip effect

This article example shares the specific code of ...

The difference between MySQL database host 127.0.0.1 and localhost

Many of my friends may encounter a problem and do...

JS realizes special effects of web page navigation bar

This article shares with you a practical web navi...