JS实现轮播图(自动+手动) |
您所在的位置：网站首页 › 崩坏二怎么取消轮播 › JS实现轮播图(自动+手动) |
JS实现轮播图(自动+手动)
|
网页轮播图效果：
tips:代码在文章末尾 动画函数如下： function animate(obj,target,callback) { //先清除以前的定时器，只保留当前的一个定时器执行 clearInterval(obj.timer); obj.timer = setInterval(function() { //步长值写到定时器里面 //把我们步长值改为整数，不要出现小数的问题 var step = (target-obj.offsetLeft) / 10; //如果向右走就向上取整，向左走就向下取整 step = step > 0 ? Math.ceil(step) : Math.floor(step); if(obj.offsetLeft == target) { clearInterval(obj.timer); //回调函数写到定时器结束里面 if(callback) { callback();//调用函数 } } else { obj.style.left = obj.offsetLeft + step + 'px'; } },10); }在本例中，我们将这个动画函数封装在一个js文件里，这样我们在移动父盒子时，就可以直接调用这个动画函数。 对这里有疑问的同学可以去我的上一篇讲动画函数封装的文章里了解一下。 功能分析我们分析下要做一个完美的网页轮播图都应该具备哪些功能： 鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。图片播放的同时，下面小圆圈模块跟随一起变化。点击小圆圈，可以播放相应图片。鼠标不经过轮播图，轮播图也会自动播放图片。鼠标经过，轮播图模块，自动播放停止。 代码示例 DOCTYPE html> * { margin: 0; padding: 0; box-sizing: border-box; } .box { position: relative; margin: 200px auto; width: 721px; height: 455px; overflow: hidden; } .left, .right { display: none; position: absolute; width: 25px; height: 35px; background: rgba(0, 0, 0, .3); line-height: 30px; text-align: center; font-size: 16px; top: 50%; transform: translateY(-50%); z-index: 2; } a { text-decoration: none; color: #fff; } li { list-style: none; } a:hover { color: red; } .left { left: 0; } .right { right: 0; } .circle { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); } .circle li { float: left; width: 10px; height: 10px; margin: 0 5px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 50%; /*鼠标经过显示小手*/ cursor: pointer; box-shadow: 1px 1px; } .current { background-color: #fff; } ul { position: absolute; display: flex; } > window.addEventListener('load',function() { // 1. 获取元素 var left = document.querySelector('.left'); var right = document.querySelector('.right'); var box = document.querySelector('.box'); var circle = document.querySelector('.circle'); var img = document.querySelector('.img'); var focus = box.offsetWidth; var num = 0; box.addEventListener('mouseenter',function() { // 2. 鼠标经过focus 就显示隐藏左右按钮 left.style.display = 'block'; right.style.display = 'block'; clearInterval(timer); timer = null;// 清除定时器变量 }) box.addEventListener('mouseleave',function() { left.style.display = 'none'; right.style.display = 'none'; timer = setInterval(function() { right.click();//手动调用点击事件 },2000) }) // 3. 动态生成小圆圈 有几张图片，我就生成几个小圆圈 for(var i = 0;i // 干掉所有人 把所有的小li 清除 current 类名 for(var i = 0;i if(flag){ flag = false; for(var i = 0;i img.style.left = 0; num = 0; } num++; animate(img,-num*focus,function() { flag = true; }); if(num==img.children.length-1) { circle.children[0].className = 'current'; } else{ circle.children[num].className = 'current'; } } }); // 9. 左侧按钮做法 left.addEventListener('click',function() { if(flag){ flag = false; for(var i = 0;i num = img.children.length-1; img.style.left = -num*focus + 'px'; } num--; animate(img,-num*focus,function() { flag = true; }); circle.children[num].className = 'current'; } }); // 10. 自动播放轮播图 var timer = setInterval(function() { right.click(); },1500) }) |
这个ul就是我们这四张图片的父盒子，我们通过对这个父盒子添加动画函数来实现移动，然后给父盒子来一个溢出隐藏就达到了轮播的效果【本文地址】
今日新闻 |
推荐新闻 |