微信小程序如何开发_原生JS无缝滑动轮播图

原生JS无缝滑动轮播图       这篇文章主要为大家详细介绍了原生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 ^ /i 
 i 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 

更多关于轮播图效果的专题，请点击下方链接查看学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。