Shulou(Shulou.com)06/02 Report--

This article mainly explains "what are the methods of JS to achieve the effect of rotation map". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. below, please follow the editor's train of thought to study and learn "what are the methods of JS to achieve the effect of rotation map"?

Realization of broadcast by Js figure 01

Realization idea

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

Realize the effect

Realize 01 .lunbo {width: 900px; height: 400px; margin:100px auto;} .lunbo img {width: 100%; height:100%;}

Var index = 1; function lunbo () {index+ +; / / determine whether index is greater than 3 if (index > 3) {index = 1;} / / get img object var img = document.getElementById ("lunbo_img"); img.src = ". / pic/img" + index+ ".jpeg" } / / 2. Define the timer setInterval (lunbo,2000); / * remember that calling the lunbo method in the timer cannot add (), setInterval (lunbo,2000); if you add (), the lunbo () method will be executed, causing the timer to be useless. Realization of broadcast by Js figure 02

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

Realize 02 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); Js to realize broadcast figure 03

The realization of this round map, first of all, through the CSS code to hide the li tags of all stored pictures by setting the opacity attribute to 0, using the js code to call the class active to highlight the li tags, while hiding the brother li tags, and then through index++ to achieve the effect of switching circular display. When you click the buttons on both sides, call the index++ method to achieve the switching effect, without complex algorithms. A little bit of the basics will be learned by looking at the code, please refer to it.

Realize the effect

HTML code

Realization of Carousel Graph by Js

CSS code

* {margin: 0; padding: 0;} a {list-style: none;} li {list-style: none;} .lunbo {width: 100%;} .content {width: 800px; height: 300px; margin: 20px auto; position: relative;} # item {width: 100%; height: 100%;} .item {position: absolute; opacity: 0; transition: all 1s;} .item.active {opacity:1;} img {width: 100%;} # btn-left {width: 30px; height: 69px; font-size: 30px Color: white; background-color:rgba; line-height: 69px; padding-left:5px; z-index: 10 cursor btn-left * always appears at the top of the picture * / position: absolute; left: 0; top: 50%; transform: translateY (- 60%); / * offset the button upward and center the alignment * / cursor: pointer; opacity: 0 Tacter * hides normally * /}. Lunbo:hover # btn-left {/ * mouse slips in and shows icon * / opacity: 1 } # btn-right {width: 26px; height: 69px; font-size: 30px; color: white; background-color:rgba; line-height: 69px; padding-left: 5px; z-index: 10; position: absolute; right: 0; top: 50%; cursor: pointer; opacity: 0; transform: translateY (- 60%);}. Lunbo:hover # btn-right {opacity: 1;} # circle {height: 20px; display: flex; position: absolute; bottom: 35px; right: 25px;}. Height: 10px; border-radius: 10px; border: 2px solid white; background: rgba; cursor: pointer; margin: 5px;} .white {background-color: # FFFFFF;}

JS code

_ window.onload=function () {var items=document.getElementsByClassName ("item"); var circles=document.getElementsByClassName ("circle"); var leftBtn=document.getElementById ("btn-left"); var rightBtn=document.getElementById ("btn-right"); var content=document.querySelector ('.content'); var index=0;var timer=null;// clears classvar clearclass=function () {for (let iContent)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.