这篇文章主要为大家展示了原生js如何实现滑动轮播封装,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。
创新互联建站是专业的巨野网站建设公司,巨野接单;提供网站建设、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行巨野网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!封装滑动轮播
<!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="images/1.jpg"></li> <li><img src="images/2.jpg"></li> <li><img src="images/3.jpg"></li> <li><img src="images/4.jpg"></li> </ul> <div id="pages"></div> <div id="prev"><</div> <div id="next">></div> </div> <script src="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>
标题名称:原生js如何实现滑动轮播封装-创新互联
网页路径:https://www.cdcxhl.com/article32/hhpsc.html
成都网站建设公司_创新互联,为您提供面包屑导航、搜索引擎优化、网站收录、微信小程序、关键词优化、标签优化
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联