原生JS无缝滑动轮播图
更新时间:2019年10月22日 17:13:08 作者:Tanjc518
这篇文章主要为大家详细介绍了原生JS实现淡出淡入轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了原生JS无缝滑动轮播图的具体实现代码,供大家参考,具体内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ul,div,img{ margin: 0; padding: 0; list-style: none; vertical-align: top; } #banner{ width: 400px; height: 300px; margin:50px auto; position: relative; overflow: hidden; } #banner ul{ width: 400px; position: absolute; } #banner li img{ width: 400px; height: 300px; text-align: center; line-height: 300px; font-size: 40px; } #dot{ height: 20px; position: absolute; left: calc(50% - 80px); bottom: 20px; } #dot i{ width: 14px; height: 14px; border-radius: 50%; background: #fff; float: left; margin: 0 10px; cursor: pointer; } #dot i.current{ background: rgb(161,1,34); } #pages{ height: 60px; width:100%; position: absolute; top: calc(50% - 30px); cursor: pointer; } #pages i{ width:30px; height: 60px; background: rgb(0,0,0); font-size: 22px; color: #fff; text-align: center; line-height: 60px; opacity: 0.5; font-style: normal; position: absolute; user-select: none; } #pages i.gt{ right:0; top: 0; font-size: 21px; } #pages i:hover{ opacity: 0.7; } </style> </head> <body> <div id="banner"> <ul id="ul"> <li><img src="images2/imgs (1).jpg" alt=""></li> <li><img src="images2/imgs (2).jpg" alt=""></li> <li><img src="images2/imgs (3).jpg" alt=""></li> <li><img src="images2/imgs (4).jpg" alt=""></li> <li><img src="images2/imgs (5).jpg" alt=""></li> <li><img src="images2/imgs (6).jpg" alt=""></li> <li><img src="images2/imgs (7).jpg" alt=""></li> <li><img src="images2/imgs (8).jpg" alt=""></li> </ul> <div id="dot"> </div> <div id="pages"> <i class="lt">^</i> <i class="gt">v</i> </div> </div> <script src="tool.js"></script> <script type="text/javascript"> var lis = $("li", $("#ul")), liHeight = lis[0].offsetHeight, len = lis.length; c = 1; n = 2; var first = lis[0].cloneNode(true), last = lis[len - 1].cloneNode(true); $("#ul").insertBefore(last, lis[0]); $("#ul").appendChild(first); var html = ""; for(var i = 0; i < len; i++) html += "<i></i>"; len += 2; $("#dot").innerHTML = html; $("#ul").style.height = liHeight * len + "px"; $("#ul").style.top = -liHeight + "px"; var dots = $("i", $("#dot")); dots[0].className = "current"; var tf = true; function move(){ var _top = -n * liHeight; animate($("#ul"), {top : _top}, 300, function(){ if(n >= len){ n = 2; c = 1; css($("#ul"), "top", -liHeight + "px"); }else if(n <= 1){ c = len - 2; n = len - 1; css($("#ul"), "top", c * -liHeight + "px"); } }); var dotIndex = n - 1; if(dotIndex === len - 2) dotIndex = 0; else if(dotIndex === -1) dotIndex = len -3; for(let i =0; i<dots.length; i ++) dots[i].className = ""; dots[dotIndex].className = "current"; c = n; n++; } var timer = setInterval(move, 3000); $("#banner").onmouseover = function(){ clearInterval(timer); } $("#banner").onmouseout = function(){ timer = setInterval(move, 3000); } on($("#dot"), "mouseover", function(e){ e = e || event; var src = e.target || e.srcElement; if(src.nodeName === "I"){ var index = Array.from($("i", this)).indexOf(src); n = index + 1; move(); } }) var timeout; on($("#pages"), "click",function(e){ clearTimeout(timeout); if(tf){ tf = false; e = e || event; var src = e.target || e.srcElement; if(src.className === "gt"){ n = c - 1; move(); }else if(src.className === "lt"){ move(); } } timeout = setTimeout(function(){ tf = true; },400) }) </script> </body> </html>
更多关于轮播图效果的专题,请点击下方链接查看学习
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
document.styleSheets[0].rules 与 cssRules区别
document.styleSheets[0].rules 与 cssRules区别...2007-08-08基于JavaScript实现继承机制之原型链(prototype chaining)的详解
我们知道在JavaScript中定义类的原型方式,而原型链扩展了这种方式,以一种有趣的方式实现继承机制。prototype 对象是个模板,要实例化的对象都以这个模板为基础。总而言之,prototype 对象的任何属性和方法都被传递给那个类的所有实例。原型链利用这种功能来实现继承机制2013-05-05
最新评论