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

This article mainly introduces the native JavaScript how to achieve the effect of broadcast pictures, the article introduces in great detail, has a certain reference value, interested friends must read it!

1. Function:

1. Automatically switch the next round picture every 2.5s

2. Switch the corresponding broadcast map by the button at the bottom.

3. The mouse moves in and pauses to switch automatically, and the move-out starts.

4. When the mouse is moved in, the left and right toggle buttons appear, and the left and right sides can be switched to turn the broadcast map.

2. Effect (GIF):

Third, the code:

Structural layer (HTML)

Presentation layer (CSS)

Box {width: 300px; height: 200px; background: # 333; border-radius: 5px; overflow: hidden; margin: 0 auto; font-size: 0; position: relative; display: flex; align-items: center;} .box: hover .arrows {display: block;} .box img {width: 100%;} .arrows {width: 20px; text-align: center; position: absolute; top: 50%; transform: translateY (- 50%); z-index: 9; font-size: 30px; display: none: } .left {left: 10px;} .right {right: 10px;} .buttom {list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; position: absolute; bottom: 10px; left: 50%; transform: translateX (- 50%);} .buttom li {width: 20px; height: 5px; border-radius: 1px; background: # fff; margin: 02px;} active {background: red! important;}

Behavior layer (JavaScript)

Let count = 0 / / create the current carousel subscript / / get the DOM element let box = document.querySelector ('.box') let img = document.querySelector ('img') let left = document.querySelector (' left') let right = document.querySelector ('.right') let ul = document.querySelector ('ul') / / rotated picture array let imgArr = [. / image/banner1.jpg','. / image/banner2.jpg','. / image/banner3.jpg' '. / image/banner4.jpg'] / / add the corresponding bottom toggle li tag imgArr.forEach (() = > {let li = document.createElement (' li') ul.appendChild (li)}) let lis = document.querySelectorAll ('li') / / get all li tags lis [0] .className =' active' / / add the selected status to the first li tag / / perform the switch rotation graph Function switchImg (type) {return function () {if (type = = 1) {if (count-1)

= imgArr.length) {count = 0} else {count + = 1} img.src = imgArr [count] lis.forEach ((vMagne I) = > {lis.className ='if (I = = count) {lis.className = 'active'})} left.addEventListener (' click', switchImg (1)) / / previous broadcast right.addEventListener ('click') SwitchImg (2)) / / next rotation chart / / Click the bottom li tag to switch the rotation chart lis.forEach ((value,index) = > {lis.addEventListener ('click', () = > {lis.forEach ((v). I) = > {lis.className =''}) count = index img.src = imgArr [count] lis.className = 'active'})) / / create a timer to automatically switch the next carousel map every 2.5s let swiper = setInterval (() = > {right.click ()}) 2500) / / pause automatic switching box.onmouseenter = () = > {clearInterval (swiper)} / / start automatic switching box.onmouseleave = () = > {swiper = setInterval (() = > {right.click ()}, 1500)} above are all the contents of the article "how to achieve the effect of rowing pictures in native JavaScript" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

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.