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

A Deep Understanding of Angle Brackets in Bash (For Beginners)

Preface Bash has many important built-in commands...

Promise encapsulation wx.request method

The previous article introduced the implementatio...

Button does not specify type as submit. Clicking the button does not jump to the specified URL.

Today, due to project requirements, js is needed t...

Explanation of CAST and CONVERT functions for type conversion in MySQL database

MySQL's CAST() and CONVERT() functions can be...

How to connect Navicat to the docker database on the server

Start the mysql container in docekr Use command: ...

Sitemesh tutorial - page decoration technology principles and applications

1. Basic Concepts 1. Sitemesh is a page decoratio...

Vue uniapp realizes the segmenter effect

This article shares the specific code of vue unia...

HTML+CSS to create heartbeat special effects

Today we are going to create a simple heartbeat e...

Install mysql offline using rpm under centos 6.4

Use the rpm installation package to install mysql...

How to quickly deploy Gitlab using Docker

1. Download the gitlab image docker pull gitlab/g...

Detailed explanation of the principle of Docker image layering

Base image The base image has two meanings: Does ...

MySQL query_cache_type parameter and usage details

The purpose of setting up MySQL query cache is: C...

Teach you how to quickly enable self-monitoring of Apache SkyWalking

1. Enable Prometheus telemetry data By default, t...

Example of how to upload a Docker image to a private repository

The image can be easily pushed directly to the Do...

Detailed steps for installing MySQL using cluster rpm

Install MySQL database a) Download the MySQL sour...