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

Editor to share with you how to make js broadcast picture effect, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Difficulties:

1. How to make the corresponding circle and picture generate automatically and dynamically

2. How to make the bottom circle correspond to the picture

3. The distance between the box on the previous page and the next page

4. Gradual animation effect when the picture is switched.

5. The concept of throttle valve

Effect:

Code:

Document * {padding: 0; margin: 0;} a {text-decoration: none; color: white; line-height: 50px; text-align: center;} li {list-style: none } .tb-promo {position: relative; width: 700px; height: 300px; margin: auto; overflow: hidden;} .tb-promo .imgg {position: absolute; top: 0; left: 0; width: 3000px } .tb-promo .imgg li {float: left;} .tb-promo .imgg li img {width: 700px; height: 300px;} .tb-promo .prev {display: none; position: absolute; top: 125px; left: 0 Width: 25px; height: 50px; background-color: rgba (0,0,0,0.2); border-top-right-radius: 25px; border-bottom-right-radius: 25px; z-index: 999;} .tb-promo .prev: hover {background-color: rgba (0,0,0,0.5) }. Tb-promo. Next {display: none; position: absolute; top: 125px; right: 0; width: 25px; height: 50px; background-color: rgba (0,0,0,0.2); border-top-left-radius: 25px; border-bottom-left-radius: 25px Z-index: 999;} .tb-promo .next: hover {background-color: rgba (0,0,0,0.5);} .tb-promo. Promo-nav {position: absolute; top: 270px; left: 50%; margin-left:-40px; height: 25px }. Tb-promo. Promo-nav li {float: left; width: 16px; height: 16px; background-color: white; border-radius: 8px; margin: 4px;} .tb-promo. Promo-nav .one {background-color: tomato;}

Var prev = document.querySelector ('.prev'); var next = document.querySelector ('.next'); var tbpromo = document.querySelector ('.tb-promo'); var ul = document.querySelector (' ul'); var ol = document.querySelector ('ol'); / / Animation function function animate (obj, target) {clearInterval (obj.timer) / / call to prevent multiple clicks to call obj.timer = setInterval (function () {var step = (target-obj.offsetLeft) / 10; step = step > 0? Math.ceil (step): Math.floor (step); / / rounding positive and negative values if (obj.offsetLeft = = target) {clearInterval (obj.timer);} else {obj.style.left = obj.offsetLeft + step + 'px' }}, 10)} / / generate a dynamic navigation circle var tbpromWidth = tbpromo.offsetWidth; for (var I = 0; I < ul.children.length; iTunes +) {var li = document.createElement ('li'); ol.appendChild (li) / / record the index number through the custom attribute li.setAttribute ('index', I); / / write circle discoloration li.addEventListener (' click', function () {/ / clear all circle colors for (var I = 0; I < ol.children.length) This.className +) {ol.children.className =';} this.className = 'one'; var index = this.getAttribute (' index'); / / Click li to give the index number of li to the control variable num = index; circle=index Animate (ul,-index * tbpromWidth);}) ol.children [0] .className = 'one';} / / Clone the first picture li at the back seamlessly switch var frist = ul.children [0] .cloneNode (true); ul.appendChild (frist) / / hide and show the next page tbpromo.addEventListener ('mouseenter', function () {prev.style.display =' block'; next.style.display = 'block'; clearInterval (timer); timer=0) / / clear timer variable}) tbpromo.addEventListener ('mouseleave', function () {prev.style.display =' none'; next.style.display = 'none'; timer=setInterval (function () {next.click ()) / / manually transfer click event}, 1500)}) / / next prev animation var num = 0; / / control circle var circle = 0; / / throttle variable var flag=true / / the next page next.addEventListener ('click', function () {/ / the last page determines that the ul recovery left is 0 if (num = = (ul.children.length-1)) {ul.style.left = 0; num = 0;} num++ Animate (ul,-num * tbpromWidth); circle++; if (circle = = 3) {circle = 0;} for (var I = 0; I < ol.children.length; iTunes +) {ol.children.className ='' } ol.children.className = 'one';}) / / previous page prev.addEventListener (' click', function () {if (num = = 0) {num = ul.children.length-1) Ul.style.left =-num*tbpromWidth+'px';} else {num--; animate (ul,-num*tbpromWidth); circle--; if (circle

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.