Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

How to realize the effect of broadcast Picture with Pure js

2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

This article mainly introduces how to achieve the effect of pure js, which is very detailed and has a certain reference value. Friends who are interested must finish it!

Effect picture

Code

1. Css

/ * clear the default inner and outer margin of the element * / * {margin: 0; padding: 0} body {width: 1000px; margin: 0 auto;} / * remove the dot in front of the list * / li {list-style: none;} / * the picture has no frame and remove the blank gap on the bottom side of the picture * / img {border: 0; / * ie6*/ vertical-align: middle } / * Unlink underscores * / a {color: # 666; text-decoration: none;} a:hover {color: # e33333;}. Fl {float: left;}. Fr {float: right;}. Focus {position: relative; width: 721px; height: 455px; background-color: purple; overflow: hidden; margin-top: 20px;}. Focus ul {position: absolute; top: 0; left: 0 Width: 600%;}. Focus ul li {float: left;}. Arrow-l,.arrow-r {display: none; position: absolute; top: 50%; margin-top:-20px; width: 24px; height: 40px; background: rgba (0,0,0, .3); text-align: center; line-height: 40px; color: # fff; font-family: 'icomoon'; font-size: 18px Z-index: 2;}. Arrow-r {right: 0;}. Circle {position: absolute; bottom: 10px; left: 50px;} .circle li {float: left; width: 8px; height: 8px; / * background-color: # fff;*/ border: 2px solid rgba (255,255,255,0.5); margin: 03px; border-radius: 50% / * display small hands over the mouse * / cursor: pointer;} .current {background-color: # fff;}

2. Html

< >

3. JavaScript

Window.addEventListener ('load', function () {/ / 1. Get the element var arrow_l = document.querySelector ('.arrow-l'); var arrow_r = document.querySelector (' .arrow-r'); var focus = document.querySelector ('.focus'); var focusWidth = focus.offsetWidth; / / 2. Mouse over focus shows hidden left and right buttons focus.addEventListener ('mouseenter', function () {arrow_l.style.display =' block'; arrow_r.style.display = 'block'; clearInterval (timer); timer = null; / / clear timer variable}); focus.addEventListener (' mouseleave', function () {arrow_l.style.display = 'none' Arrow_r.style.display = 'none'; timer = setInterval (function () {/ / manually call click event arrow_r.click ();}, 2000);}); / / 3. Dynamically generate a few pictures of a small circle, I generate a few small circles var ul = focus.querySelector ('ul'); var ol = focus.querySelector (' .circle'); / / console.log (ul.children.length); for (var I = 0; I)

< ul.children.length; i++) { // 创建一个小li var li = document.createElement('li'); // 记录当前小圆圈的索引号 通过自定义属性来做 li.setAttribute('index', i); // 把小li插入到ol 里面 ol.appendChild(li); // 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件 li.addEventListener('click', function() { // 干掉所有人 把所有的小li 清除 current 类名 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } // 留下我自己 当前的小li 设置current 类名 this.className = 'current'; // 5. 点击小圆圈,移动图片 当然移动的是 ul // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值 // 当我们点击了某个小li 就拿到当前小li 的索引号 var index = this.getAttribute('index'); // 当我们点击了某个小li 就要把这个li 的索引号给 num num = index; // 当我们点击了某个小li 就要把这个li 的索引号给 circle circle = index; // num = circle = index; console.log(focusWidth); console.log(index); animate(ul, -index * focusWidth); }) } // 把ol里面的第一个小li设置类名为 current ol.children[0].className = 'current'; // 6. 克隆第一张图片(li)放到ul 最后面 var first = ul.children[0].cloneNode(true); ul.appendChild(first); // 7. 点击右侧按钮, 图片滚动一张 var num = 0; // circle 控制小圆圈的播放 var circle = 0; // flag 节流阀 var flag = true; arrow_r.addEventListener('click', function() { if (flag) { flag = false; // 关闭节流阀 // 如果走到了最后复制的一张图片,此时 我们的ul 要快速复原 left 改为 0 if (num == ul.children.length - 1) { ul.style.left = 0; num = 0; } num++; animate(ul, -num * focusWidth, function() { flag = true; // 打开节流阀 }); // 8. 点击右侧按钮,小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放 circle++; // 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原 if (circle == ol.children.length) { circle = 0; } // 调用函数 circleChange(); } }); // 9. 左侧按钮做法 arrow_l.addEventListener('click', function() { if (flag) { flag = false; if (num == 0) { num = ul.children.length - 1; ul.style.left = -num * focusWidth + 'px'; } num--; animate(ul, -num * focusWidth, function() { flag = true; }); // 点击左侧按钮,小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放 circle--; // 如果circle < 0 说明第一张图片,则小圆圈要改为第4个小圆圈(3) // if (circle < 0) { // circle = ol.children.length - 1; // } circle = circle < 0 ? ol.children.length - 1 : circle; // 调用函数 circleChange(); } }); function circleChange() { // 先清除其余小圆圈的current类名 for (var i = 0; i < ol.children.length; i++) { ol.children[i].className = ''; } // 留下当前的小圆圈的current类名 ol.children[circle].className = 'current'; } // 10. 自动播放轮播图 var timer = setInterval(function() { //手动调用点击事件 arrow_r.click(); }, 2000);}) 重点!!! 用到的实现图片移动的动画文件,animate.js function animate(obj, target, callback) { // console.log(callback); callback = function() {} 调用的时候 callback() // 先清除以前的定时器,只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { // 步长值写到定时器的里面 // 把我们步长值改为整数 不要出现小数的问题 // var step = Math.ceil((target - obj.offsetLeft) / 10); var step = (target - obj.offsetLeft) / 10; step = step >

0? Math.ceil (step): Math.floor (step); if (obj.offsetLeft = = target) {/ / stop the animation essence is to stop the timer clearInterval (obj.timer); / / the callback function is written to the end of the timer / / if (callback) {/ call function / / callback () / /} callback & & callback ();} / / change the step size value of adding 1 each time to a slowly decreasing value step size formula: (target value-current position) / 10 obj.style.left = obj.offsetLeft + step + 'px';}, 15) } these are all the contents of the article "how to achieve the effect of pure js". 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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report