Detailed explanation of using backgroundImage to solve the image carousel switching

Detailed explanation of using backgroundImage to solve the image carousel switching

Implementing carousel with a single DOM node

You can use backgroundImage to add multiple images and offset them to achieve a carousel effect.

  • Create a div and attach an image to it using backgroundImage
  • Use backgroundPosition to adjust the position
  • Using css3 transition to adjust transition
  • It can replace simple image switching
  /**
        * Play picture */
    function playImage(src) {
        if (animaitionFinshed) return;
        if (!_imageEl) {
            _imageEl = document.createElement('div')
            _imageEl.className = `swiper_container`;
            _imageEl.style.backgroundImage = `url(${src.url})`;
            _imageEl.setAttribute("data-img", src.url);
            elContainer.appendChild(_imageEl);
        } else {
            animaitionFinshed = true;
            let width = elContainer.clientWidth, height = elContainer.clientHeight;
            let preImage = _imageEl.getAttribute("data-img");
            _imageEl.style.backgroundImage = `url(${preImage}),url(${src.url})`;
            _imageEl.style.backgroundPositionX = `center,${width + 20}px`;
            setTimeout(() => {
                _imageEl.style.transition = "all 0.8s ease";
                _imageEl.style.backgroundPositionX = `-${width + 20}px,center`;
            }, 0);

            setTimeout(() => {
                _imageEl.style.transition = "none";
                _imageEl.style.backgroundImage = `url(${src.url}) `;
                _imageEl.style.backgroundPositionX = `center`;
                _imageEl.setAttribute("data-img", src.url)
                animaitionFinshed = false;
            }, 800)
        }
    }

source code

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.

<<:  Summary of the differences between Html, sHtml and XHtml

>>:  Example of deploying MySQL on Docker

Recommend

In-depth analysis of MySQL 8.0 redo log

Table of contents Preface Generation of redo log ...

How to connect to a remote docker server with a certificate

Table of contents 1. Use scripts to encrypt TLS f...

Mysql method to copy a column of data in one table to a column in another table

mysql copy one table column to another table Some...

Install MySQL5.5 database in CentOS7 environment

Table of contents 1. Check whether MySQL has been...

How to track users with JS

Table of contents 1. Synchronous AJAX 2. Asynchro...

Simple setup of VMware ESXi6.7 (with pictures and text)

1. Introduction to VMware vSphere VMware vSphere ...

In-depth explanation of the locking mechanism in MySQL

Preface In order to ensure the consistency and in...

Detailed explanation of the method of comparing dates in MySQL

If there is a table product with a field add_time...

HTML tutorial, easy to learn HTML language

1. <body background=image file name bgcolor=co...

Secondary encapsulation of element el-table table (with table height adaptation)

Preface During my internship at the company, I us...

MySQL slow_log table cannot be modified to innodb engine detailed explanation

background Getting the slow query log from mysql....

Attributes in vue v-for loop object

Table of contents 1. Values ​​within loop objects...

Implementing a simple whack-a-mole game in JavaScript

This article shares the specific code for JavaScr...

Example code of javascript select all/unselect all operation in html

Copy code The code is as follows: <html> &l...

Videojs+swiper realizes Taobao product details carousel

This article shares the specific code of videojs+...