JavaScript imitates Jingdong carousel effect

JavaScript imitates Jingdong carousel effect

This article shares the specific code for JavaScript to achieve the display of JD.com's carousel effect for your reference. The specific content is as follows

I made a carousel imitating JD.com, but of course it’s not as beautiful as their official website.

Main technical points:

  • Automatically switch pictures every 3 seconds;
  • When the mouse moves into the picture, the switching will be automatically paused, and when the mouse moves out, the switching will continue;
  • Click the left and right arrow buttons to manually switch pictures;
  • Move the mouse to the gray dot to display the corresponding image and highlight it.

HTML code:

<body>
 <h1>Slideshow display</h1>
 <div id="did">

 <!-- Image -->
 <div id="img-div" onmouseover="doStop()" onmouseout="doStart()">
  <img src="./1.jpg">
  <img src="./2.jpg">
  <img src="./3.jpg">
  <img src="./4.jpg">
  <img src="./5.jpg">
  <img src="./6.jpg">
  <img src="./7.jpg">
  <img src="./8.jpg">
 </div>

 <!-- Left and right buttons -->
 <div id="btn-div">
  <div id="left-btn" onclick="doLeftClick()">
  <h3> < </h3>
  </div>
  <div id="right-btn" onclick="doRightClick()">
  <h3> > </h3>
  </div>
 </div>

 <!-- Dot -->
 <div id="cir-div">
  <div onmouseover="doMove(1)"></div>
  <div onmouseover="doMove(2)"></div>
  <div onmouseover="doMove(3)"></div>
  <div onmouseover="doMove(4)"></div>
  <div onmouseover="doMove(5)"></div>
  <div onmouseover="doMove(6)"></div>
  <div onmouseover="doMove(7)"></div>
  <div onmouseover="doMove(8)"></div>
 </div>
 </div>

</body>

CSS code:

<style>
 * {
 margin: 0px;
 padding: 0px;
 }

 body {
 background-color: rgb(255, 249, 249);
 }

 h1 {
 text-align: center;
 padding-top: 40px;
 color: rgba(250, 54, 129, 0.562);
 }

 #did {
 position: relative;
 width: 590px;
 height: 470px;
 margin: 30px auto;
 }

 #img-div {
 position: absolute;
 }

 #img-div img {
 width: 590px;
 display: none;
 cursor: pointer;
 z-index: -1;
 }

 /* These two paragraphs can be omitted*/
 /* Display the first image */
 #img-div img:first-child {
 display: block;
 }

 /* Light up the first dot */
 #cir-div div:first-child {
 background: #fff;
 }

 #cir-div {
 position: absolute;
 /* Position relative to the image */
 left: 40px;
 bottom: 25px;
 }

 /* The dot below*/
 #cir-div div {
 width: 8px;
 height: 8px;
 float: left;
 /* 50% is round*/
 border-radius: 50%;
 margin-right: 6px;
 border: 1px solid rgba(0, 0, 0, .05);
 background: rgba(255, 255, 255, .4);
 }

 #left-btn {
 position: absolute;
 /* Position relative to the image */
 top: 45%;

 /*Left semicircle button*/
 width: 27px;
 height: 38px;
 background: rgba(119, 119, 119, 0.5);
 border-radius: 0 20px 20px 0;
 /* Animation effect, placed before the change, when the mouse moves over it, it will slowly change color*/
 transition: background-color 0.3s ease-out;
 }

 #right-btn {
 position: absolute;
 /* Position relative to the image */
 top: 45%;
 right: 0px;

 /* Right semicircle button */
 width: 27px;
 height: 38px;
 background-color: rgba(119, 119, 119, 0.5);
 border-radius: 20px 0 0 20px;
 /* Animation effect, placed before the change, when the mouse moves over it, it will slowly change color*/
 transition: background-color 0.3s ease-out;
 }

 #left-btn:hover {
 background-color: rgba(32, 32, 32, 0.5);
 cursor: pointer;
 }

 #right-btn:hover {
 background-color: rgba(32, 32, 32, 0.5);
 cursor: pointer;
 }

 #left-btn h3 {
 color: #fff;
 margin-top: 4px;
 margin-left: 2px;
 }

 #right-btn h3 {
 color: #fff;
 margin-top: 4px;
 margin-left: 8px;
 }
</style>

JavaScript code:

<script>
 //Show the first picture var count = 1;
 //Time var time = null;
 //Picture list var imglist = document.getElementById("img-div").getElementsByTagName("img");
 //Dot list var cirlist = document.getElementById("cir-div").getElementsByTagName("div");

 //Show the corresponding picture and light up the corresponding dot function show(x) {
 for (var i = 0; i < imglist.length; i++) {
  if (x == i + 1) {
  //Display the picture imglist[i].style.display = "block";
  //The dots light upcirlist[i].style.backgroundColor = "#fff";
  } else {
  imglist[i].style.display = "none";
  cirlist[i].style.background = "rgba(255, 255, 255, .4)";
  }
 }
 }

 //Timed carousel pictures (switch a picture every 3 seconds)
 function doStart() {
 if (time == null) {
  time = setInterval(function () {
  count++;
  show(count);
  if (count >= 8) {
   count = 0;
  }
  }, 3000);
 }
 }

 //Stop the carousel function doStop() {
 if (time != null) {
  clearInterval(time);
  time = null;
 }
 }

 //When the mouse moves to a dot, the image will switch accordingly, and then the next dot will light up instead of the next dot before it is moved to. function doMove(x) {
 show(x);
 //Assign the position to count, and the picture will switch from the next picture count = x;
 //When the mouse moves to the last dot, count needs to be changed to 0, otherwise count++ in doStart() will be executed and count will become 9, which is out of bounds if (count == 8) {
  count = 0;
 }
 }

 /*
 For the relationship between i, count and x in show(x):
  i = [0,7];
  x = [1,8];
  count = [1,8];
 */
 //Click the left button to switch the picture to the left function doLeftClick() {
 for (var i = 0; i < imglist.length; i++) {
  //Determine which image is currently being displayed if (imglist[i].style.display == "block") {
  if (i == 0) {
   show(8);
   // After forgetting this sentence, break will exit directly. When the left button is pressed to the rightmost dot, dot 1 will be ignored and jump directly to dot 2
   count = 0;
   //Ensure the switch is 3 seconds doStop();
   doStart();
   break;
  }
  show(i);
  count = i;
  //Ensure the switch is 3 seconds doStop();
  doStart();
  break;
  }
 }
 }

 //Click the right button to switch the picture to the right function doRightClick() {
 for (var i = 0; i < imglist.length; i++) {
  //Determine which image is currently being displayed if (imglist[i].style.display == "block") {
  if (i == 7) {
   show(1);
   count = 1;
   doStop();
   doStart();
   break;
  }
  show(i + 2);
  count = i + 2;
  //There will be no switching to the situation where there is no picture if (count >= 8) {
   count = 0;
  }
  doStop();
  doStart();
  break;
  }
 }
 }

 doStart();
 //The default opening page displays the first picture// (If not added, the first circle will light up, which means that when the page is just opened, the left button will not respond)
 doMove(1);
</script>

Difficulties encountered:

Although the carousel looks quite simple, there are still many problems in its implementation. But I have solved all the ones I found.

  • Dots and buttons placed on images
  • The picture is automatically switched but the corresponding dot is not lit
  • When the mouse moves to a dot, the image switches, but the next dot that automatically lights up is the next dot before the one you moved to.
  • The first circle lights up when the page is just opened, and the left button does not respond
  • When the left button is pressed to the rightmost dot, dot 1 will be ignored and the button will jump directly to dot 2.
  • When you click the right button at the last dot, the image will be switched to a state without pictures.
  • The switching time for clicking the left button is about 2 seconds, and the switching time for clicking the right button is about 5 seconds, which is not up to the standard 3 seconds.

But I solved it!

The biggest feeling is that when you are feeling proud of having just solved a bug, another bug appears.

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:
  • JavaScript implements circular carousel
  • Several methods of implementing carousel images in JS
  • js to write the carousel effect
  • Implementing a simple carousel based on JavaScript
  • JavaScript Dom implements the principle and example of carousel
  • Native js to achieve seamless carousel effect
  • js to achieve mobile carousel sliding switch
  • javascript to realize the scroll wheel carousel picture
  • Sample code for a simple seamless scrolling carousel implemented with native Js

<<:  Detailed explanation of InnoDB architecture and features (summary of InnoDB storage engine reading notes)

>>:  How to configure two or more sites using Apache Web server

Recommend

Vue implements drag progress bar

This article example shares the specific code of ...

Configure nginx to redirect to the system maintenance page

Last weekend, a brother project was preparing to ...

How to configure port forwarding for docker on CentOS 7 to be compatible with firewall

On CentOS 7, when we map the host port to the con...

Detailed explanation of this pointing problem in JavaScript

Preface The this pointer in JS has always been a ...

HTML web page image tag

Insert image tag <IMG> The colorful web page...

Detailed explanation of JavaScript timers

Table of contents Brief Introduction setInterval ...

Detailed explanation of error handling examples in MySQL stored procedures

This article uses an example to describe the erro...

MySQL 8.0.19 Installation Tutorial

Download the installation package from the offici...

Use of vuex namespace

Table of contents Since Vuex uses a single state ...

How to change the domestic image source for Docker

Configure the accelerator for the Docker daemon S...

How to connect SpringBoot to MySQL to get data and write to the backend interface

Table of contents 1. Create a new project 2. Add ...

CSS multi-column layout solution

1. Fixed width + adaptive Expected effect: fixed ...

MySQL 8.0.21 free installation version configuration method graphic tutorial

Six steps to install MySQL (only the installation...

Detailed explanation of MLSQL compile-time permission control example

Preface The simple understanding of MySQL permiss...

Issues with using Azure Container Registry to store images

Azure Container Registry is a managed, dedicated ...