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

Ubuntu 18.04 installs mysql 5.7.23

I installed MySQL smoothly in Ubuntu 16.04 before...

The easiest way to debug stored procedures in Mysql

A colleague once told me to use a temporary table...

How to display a small icon in front of the browser URL

When you browse many websites, you will find that ...

JavaScript plugin encapsulation for table switching

This article shares the encapsulation code of Jav...

Minimalistic website design examples

Web Application Class 1. DownForEveryoneOrJustMe ...

Several methods to solve the problem of MySQL fuzzy query index failure

When we use the like % wildcard, we often encount...

Implementation steps for building multi-page programs using Webpack

It is very common to use webpack to build single-...

How to deploy gitlab using Docker-compose

Docker-compose deploys gitlab 1. Install Docker I...

HTML table tag tutorial (7): background color attribute BGCOLOR

The background color of the table can be set thro...

Vue makes a simple random roll call

Table of contents Layout part: <div id="a...