原生js滑动轮播封装
导读：本文实例为大家分享了原生js滑动轮播的具体代码，供大家参考，具体内容如下封装滑动轮播<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport...
本文实例为大家分享了原生js滑动轮播的具体代码，供大家参考，具体内容如下
封装滑动轮播
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-equiv='X-UA-Compatible' content='ie=edge'> <title>cmm无缝轮播</title> <style type='text/css'> *{margin: 0 ;padding : 0} #container{ height: 470px; width: 590px; border: 1px solid red; position: relative; margin: 50px auto; } #box{ position: absolute; list-style: none; } #box li{ float: left; } #pages { width: 100%; height: 30px; background: #ccc; position: absolute; bottom: 0; } #pages i { width: 20px; height: 20px; display: inline-block; border-radius: 10px; background: #fff; margin: 5px; } #pages i.current { background: #f00; } #prev, #next { width: 45px; height: 100px; position: absolute; top: 0; bottom: 0; margin: auto; background: #ccc; line-height: 100px; text-align: center; font-size: 40px; color: #fff; } #next { right: 0; } </style></head><body> <div id='container'> <ul id='box'> <li><img src='https://www.haobala.com/bcjs/images/1.jpg'></li> <li><img src='https://www.haobala.com/bcjs/images/2.jpg'></li> <li><img src='https://www.haobala.com/bcjs/images/3.jpg'></li> <li><img src='https://www.haobala.com/bcjs/images/4.jpg'></li> </ul> <div id='pages'></div> <div id='prev'><</div> <div id='next'>></div> </div> <script src='https://www.haobala.com/bcjs/js/tools.js'></script> <script> var lis = $('li'), length = lis.length, liWidth = lis[0].clientWidth, currentIndex = 0, nextIndex = 1, timer = null, move = null, circls = null, durations = 2000; // 动态设置ul宽度 $('#box').style.width = length * liWidth + 'px'; // 动态设置小圆点 var html = ''; for(var i = 0 ;i <length ;i++){ html += '<i></i>' } $('#pages').innerHTML= html; circls = $('i'); circls[0].className = 'current'; // 切换动画 move = function(){ // 设置box运动终点值 var _left = -1 * nextIndex * liWidth; // 开始动画 animate($('#box'),{left:_left},200) // 修改小圆点样式 circls[currentIndex].className = ''; circls[nextIndex].className = 'current'; // 修改索引 currentIndex = nextIndex; nextIndex++; if(nextIndex >= length){ nextIndex = 0; } } // 自动动画 timer = setInterval(move, durations) // container中鼠标移入，移出事件 on($('#container'),'mouseenter',function(){ clearInterval(timer); }) on($('#container'),'mouseleaver',function(){ timer = setInterval(move, durations); }) // 点击小圆点，切换至对应的图片 on($('#pages'),'click',function(e){ e = e || event; var src = e.target || src.Element; if(src.nodeName === 'I'){ var _index = Array.from(circls).indexOf(src); if(_index === currentIndex){ return } nextIndex = _index; move(); } }) // 点击翻页进行切换 on($('#prev'),'click',function(){ nextIndex = currentIndex - 1; if(nextIndex < 0){ nextIndex = length; } move(); }) on($('#next'),'click',function(){ move(); }) </script></body></html>
更多关于轮播图效果的专题，请点击下方链接查看学习
javascript图片轮播效果汇总
jquery图片轮播效果汇总
Bootstrap轮播特效汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. CSS3实例分享之多重背景的实现(Multiple backgrounds)2. intellij idea中spring boot properties文件不能自动提示问题解决3. Android自定义Dialog框样式4. 使用Canal实现PHP应用程序与MySQL数据库的实时数据同步5. 一篇文章带你了解JavaScript-语句6. 详解IDEA搭建springBoot方式一(推荐)7. asp.net core服务限制堆内存大小的操作方法8. intellij idea写Python教程9. Android Studio导入jar包过程详解10. IntelliJ IDEAx导出安卓（Android）apk文件图文教程
网公网安备