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

Java example code to generate random characters

Sample code: import java.util.Random; import java...

Detailed explanation of jQuery's core functions and event handling

Table of contents event Page Loading Event Delega...

Easyswoole one-click installation script and pagoda installation error

Frequently asked questions When you are new to ea...

JavaScript gets the scroll bar position and slides the page to the anchor point

Preface This article records a problem I encounte...

Detailed steps for IDEA to integrate docker to achieve remote deployment

1. Enable remote access to the docker server Log ...

Using VMware IOInsight to perform refined virtual machine storage performance monitoring

illustrate: VMware IOInsight is a tool that helps...

Detailed explanation of the use of shared memory in nginx

In the nginx process model, tasks such as traffic...

Vue implements adding watermark effect to the page

Recently, when I was working on a project, I was ...

Zabbix monitors the process of Linux system services

Zabbix automatically discovers rules to monitor s...

Detailed explanation of non-primary key column overflow monitoring in MySQL tables

Today, I fell into the trap again. I have encount...

How to view the IP address of the Docker container

I always thought that Docker had no IP address. I...

Sample code for deploying ELK using Docker-compose

environment Host IP 192.168.0.9 Docker version 19...

JS implements dragging the progress bar to change the transparency of elements

What I want to share today is to use native JS to...

Several situations where div is covered by iframe and their solutions

Similar structures: Copy code The code is as foll...

A simple example of creating a thin line table in html

Regarding how to create this thin-line table, a s...