Using JavaScript to implement carousel effects

Using JavaScript to implement carousel effects

This article shares the specific code for JavaScript to achieve the special effects of the carousel map for your reference. The specific content is as follows

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
   .aaa {
    width: 600px;
    height: 350px;
    position: relative;/*Relative positioning*/
    margin: 50px auto;/*50px from the top and centered*/
   }
   .picture img {
    position: absolute;/*absolute positioning*/
   }
   .dot {
    position: absolute;
    bottom: 5px;
   }
   .dot li {
    float: left;
    width: 16px;
    height: 16px;
    background-color: #e8e8e8;
    border-radius: 50%;
    list-style: none;/*Clear list style*/
    margin-right: 10px;
    cursor: pointer;/*The cursor is rendered as a pointer (a hand) indicating a link*/
   }
   .left {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 169px;
    text-align: center;
    background-color: #000000;
    line-height: 30px;
    color: #FFFFFF;
    cursor: pointer;/*The cursor is rendered as a pointer (a hand) indicating a link*/
   }
   .right {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 169px;
    right: 0;
    text-align: center;
    background-color: #000000;
    line-height: 30px;
    color: #FFFFFF;
    cursor: pointer;/*The cursor is rendered as a pointer (a hand) indicating a link*/
   }
   .aaa .spot {
    background-color: #FF0000;
   }
  </style>
 </head>
 <body>
  <div class="aaa">
   <div class="picture">
    <img src="images/1.jpg" style="width: 600px;height: 350px;">
    <img src="images/2.jpg" style="width: 600px;height: 350px;">
    <img src="images/3.jpg" style="width: 600px;height: 350px;">
    <img src="images/4.jpg" style="width: 600px;height: 350px;">
    <img src="images/5.jpg" style="width: 600px;height: 350px;">
   </div>
   <ul class="dot">
    <li class="spot"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
   </ul>
   <div class="left">&lt;</div><!--&lt; Escape character-->
   <div class="right">&gt;</div><!--&gt; Escape character-->
  </div>
  <script>
   var lis = document.querySelectorAll(".dot li")
   var picture = document.querySelectorAll(".picture img")
   var left = document.querySelector(".left")
   var right = document.querySelector(".right")
   var aaa = document.querySelector(".aaa")
   var index = 0 //Set the index number variable picture[index].style.opacity = 1 //The first picture is displayed //Right button changes the picture right.onclick = function() {
    fn("+")
   }
   //Left button to change the imageleft.onclick = function() {
    fn("-")
   }
   //Timer changes the image every 3000 milliseconds var timer = setInterval(function() {
    fn("+")
   }, 3000)
   //Mouse enters pause aaa.onmouseover = function() {
    clearInterval(timer)
   }
   //Mouse out and continue aaa.onmouseout = function() {
    timer = setInterval(function() {
     fn("+")
    }, 3000)
   }
   //Change the image when the mouse touches the dot for (var i = 0; i < lis.length; i++) {
    lis[i].in = i
    lis[i].onmouseover = function() {
     fn(this.in)
    }
   }
   //Function function fn(ope) {
    picture[index].style.opacity = 0 //The previous picture is hidden lis[index].className = "" //Clear small dot style//Judge ope
    if (typeof ope === 'number') {
     index = ope
    } else if (ope === '+') { //Judge whether the right button if (index === 4) {
      index = 0
     } else {
      index++
     }
    } else {
     if (index === 0) { //Judge whether the left button index = 4
     } else {
      index--
     }
    }
    picture[index].style.opacity = 1 //Current picture displaylis[index].className = "spot" //Add style to the spot}
  </script>
 </body>
</html>

The effect is shown in the figure:

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:
  • About the implementation of JavaScript carousel
  • JS implementation of carousel example
  • 3 simple ways to achieve carousel effects with JS
  • Pure js to achieve the effect of carousel
  • Native JS to implement breathing carousel
  • JavaScript super detailed implementation of web page carousel

<<:  Examples of importing and exporting MySQL table data

>>:  MySQL conditional query and or usage and priority example analysis

Recommend

Several ways to clear arrays in Vue (summary)

Table of contents 1. Introduction 2. Several ways...

How to convert mysql bin-log log files to sql files

View mysqlbinlog version mysqlbinlog -V [--versio...

MySql implements page query function

First of all, we need to make it clear why we use...

How to build a DHCP server in Linux

Table of contents 1. Basic knowledge: 2. DHCP ser...

Detailed explanation of common template commands in docker-compose.yml files

Note: When writing the docker-compose.yml file, a...

Understanding JSON (JavaScript Object Notation) in one article

Table of contents JSON appears Json structure Jso...

JavaScript to achieve click image flip effect

I was recently working on a project about face co...

Tomcat source code analysis of Web requests and processing

Table of contents Preface 1. EndPoint 2. Connecti...

Solution to the problem that Docker container cannot access Jupyter

In this project, the Docker container is used to ...

How to implement Docker to dynamically pass parameters to Springboot projects

background Recently, some friends who are new to ...

JS realizes picture digital clock

This article example shares the specific code of ...

Use Vue3 to implement a component that can be called with js

Table of contents Preface 1. Conventional Vue com...

Complete steps for vue dynamic binding icons

0 Differences between icons and images Icons are ...

Detailed process record of nginx installation and configuration

Table of contents 1 Introduction to nginx 1 What ...

Summary of knowledge points on using calculated properties in Vue

Computed properties Sometimes we put too much log...