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: