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

This article mainly introduces the relevant knowledge of "how to write the script for JS to achieve the effect of broadcast map". The editor shows you the operation process through the actual case, the operation method is simple and fast, and it is practical. I hope that this article "how to write the script for JS to achieve the effect of rotation picture" can help you solve the problem.

Here is the specific code:

W3cstores-/ * clear margins * / div,ul,li {margin: 0; padding: 0;} / * first prepare a container for pictures * / .container {width: 500px; height: 280px; position: relative; top: 100px; left: 30% / * border: 1px solid # ccc;*/} / * Image style * / .container img {position: absolute; / * put all pictures in the same location * / width: 100%; transition-duration: 0.5s; / * set transition time * / opacity: 0 / * make all pictures transparent * /} / * Image display switch * / .container img.on {opacity: 1 / * for displaying pictures * /} / * it is better to use pictures on buttons around * /} / *. Here, for simplicity, use the greater than less than sign * / .left, .right {position: absolute; top: 30%; width: 60px; height: 100px; line-height: 100px Background-color: # 666; opacity: 0.5; text-align: center; font-size: 60px; color: # ccc; display: none; / * hide the button * / cursor: pointer; / * set the style of mouse hover * /} .left {left: 0 } .right {right: 0;} .container: hover .left, .container: hover .right {display: block; / * Button appears when the mouse is in the container range * /} .left: hover, .right: hover {color: # fff } / * focus * / .container ul {position: absolute; bottom: 0; max-width: 500px; padding: 5px 200px;} .container ul li {list-style: none; float: left; background-color: # ccc; width: 10px Height: 10px; border-radius: 50%; margin-left: 10px; cursor: pointer;} .container ul li.active {background-color: # 282923; / * style when focus is activated * /}

/ 1. Find all the img tags under container, li tags, and the left and right buttons var aImgs = document.querySelectorAll ('.container img'); var aLis = document.querySelectorAll (' .container li'); var btnLeft = document.querySelector ('.container .left'); var btnRight = document.querySelector ('.container .right'); / / Click the event / / Click the button to switch the picture to var index = 0 / / current picture subscript var lastIndex = 0; btnRight.onclick = function () {/ / record the subscript of the previous picture lastIndex = index; / / clear the style of the previous picture aImgs [lastIndex] .className ='; aLis[ lastIndex] .className ='; index++; index% = aImgs.length / / implement periodic changes / / set the style of the current picture aImgs [index] .className = 'on'; aLis.className =' active';} / / the left button is similar to btnLeft.onclick = function () {/ / record the subscript lastIndex = index of the previous picture / / clear the previous picture style aImgs [lastIndex] .className ='; index--; if [lastIndex] .className =''; index--; if (index < 0) {index = aImgs.length-1;} / set the current picture style aImgs [index] .className = 'on' Alis.className = 'active';} about "how to write a script for JS to achieve the effect of a broadcast picture" is here. Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.