How does JavaScript realize the effect of broadcast picture by changing the picture link of background?

This article will explain in detail how JavaScript can achieve the effect of rotation by changing the picture link of background. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

Realization of Carousel Graph by Js

Realization idea

This may be one of the simplest implementations of a broadcast picture. To achieve this effect by changing the picture link in background, we first need to unify the picture naming format such as pic01.jpg,pic02.jpg. And then use the timer to change the name of the url () image link in the background attribute through js to achieve the switching effect. The code is as follows:

Realize the effect

Body {margin: 0; padding: 0;} .lunbo {width:100%; height:720px; background-image: url (pic/img1.jpeg); / * background image * / background-size:100% 100%;} var index = 1; function lunbo () {index + +; / / determine whether the number is greater than 3 if (index > 3) {index = 1 } / / get img object var img = document.getElementsByClassName ("lunbo") [0]; img.style.background = "url (pic/img" + index+ ".jpeg)"; img.style.backgroundSize= "100% 100%";} / / 2. Define timer setInterval (lunbo,3000); this is the end of the article on "how JavaScript can achieve the effect of rowing pictures by changing the picture link of background". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.