首页 > 代码库 > 原生 js 左右切换轮播图
原生 js 左右切换轮播图
使用方法：
可能很多人对轮播图感兴趣，下面奉上本人的 原生 js 轮播代码
复制 js 到页面的最底部，样式在 css 里改，js 基本不用动，有什么不懂的可以 加本人 QQ172360937 咨询 或者留言都可以，这个是用 原生写的 轮播图，样式可以写自己喜欢的样式，什么都不用改，只改变样式就行，页面结构的id 要与js的相对应li随便加。li 随便加的意思就是说你可以加无数个图片。每个li 里装一个图片，或者是其他什么元素，
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{padding:0;margin:0;} div{ width:200px;/*必须有*/ height:50px;/*必须有*/ position:relative;/*必须有===*/ overflow:hidden;/*必须有===*/ -webkit-user-select: none;/*必须有*/ -moz-user-select: none;/*必须有*/ -ms-user-select: none;/*必须有*/ user-select: none;/*必须有*/ margin:20px; } ul{ position:absolute;/*必须有*/ left:0;/*必须有*/ font-size:0;/*必须有*/ } li{list-style: none;/*必须有*/ font-size:16px;/*必须有*/ height:50px;/*必须有*/ width:200px;/*必须有*/ float:left;/*必须有*/ } #parent{ width:50%; height:200px; border:1px solid red; margin:0 auto; } .span{ display:inline-block;/*必须有*/ width:20px; height:20px; line-height:20px; text-align: center; border-radius:50%; color:white; cursor:pointer;/*必须有*/ } </style></head><body><div id="parent"> <div> <ul id=‘ul‘> <li style=‘background:red;‘>第一个</li> <li style=‘background:yellow;‘>第二个</li> <li style=‘background:pink;‘>第三个</li> <li style=‘background:green;‘>第四个</li> <li style=‘background:blue;‘>第五个</li> <li style=‘background:blue;‘>第6个</li> <li style=‘background:green;‘>第7个</li> <li style=‘background:blue;‘>第8个</li> <li style=‘background:green;‘>第9个</li> <li style=‘background:blue;‘>第10个</li> </ul> </div> <a href=http://www.mamicode.com/"#" id="prev">向左</a> <a href=http://www.mamicode.com/"#" id="next">向右</a></div><script> var prev = document.getElementById(‘prev‘); var next = document.getElementById(‘next‘); var parent = document.getElementById(‘parent‘); var ttt; var type = true; var t; var span; var ul = document.getElementById(‘ul‘); var li = ul.getElementsByTagName(‘li‘); var color1 = ‘#cccccc‘;//小圆点的背景颜色 灰色 var color2 = ‘red‘;//小圆点的背景颜色，红色 var liWidth = li[0].offsetWidth; ul.style.width = liWidth*li.length+‘px‘; // 点点 for(var i = 0;i<li.length;i++){ li[i].index = i; span = document.createElement(‘span‘); span.className = ‘span‘; span.style.background = color1; span.innerHTML = i+1; parent.appendChild(span); } var span_span = parent.getElementsByTagName(‘span‘); for(var n = 0;n<span_span.length;n++){ span_span[n].index = n; //所有的小圆点的事件 span_span[n].onmouseover = function(){ if(type){ ul_ul(this.index); for(var s = 0;s<span_span.length;s++){ span_span[s].style.background = color1; span_span[this.index].style.background = color2; } type = true; } } } function ul_ul(inde){ var this_li = li[0].index; if(inde>this_li){ var x = inde-this_li; for(var y = 0;y<x;y++){ ul.appendChild(li[0]); } } if(inde<this_li){ var x_x = this_li-inde; for(var g = 0;g<x_x;g++){ ul.insertBefore(li[li.length-1],li[li.length-li.length]); } } } span_span[0].style.background = color2; prev.onclick = function(){ if(type){ clearInterval(t); ul.insertBefore(li[li.length-1],li[li.length-li.length]); liWidth = li[0].offsetWidth; ul.style.left = ‘-‘+liWidth+‘px‘; t = setInterval(rem,5);//动画速度修改 type = false; background(0); } }; next.onclick = function(){ if(type){ liWidth = 0; clearInterval(ttt); ttt = setInterval(nex,5);//动画速度修改 type = false; background(1); } }; function background(number){ for(var j = 0;j<span_span.length;j++){ span_span[j].style.background = color1; } span_span[li[number].index].style.background = color2; } function nex(){ ul.style.left = ‘-‘+liWidth+ ‘px‘; liWidth += 3 ; if(liWidth == li[0].offsetWidth+1){ clearInterval(ttt); ul.appendChild(li[li.length-li.length]); liWidth = 0; ul.style.left = liWidth+‘px‘; type = true; } } function rem(){ ul.style.left = ‘-‘+liWidth+‘px‘; liWidth -= 3 ; if(liWidth == -1){ clearInterval(t); type = true; } } var parent_t = setInterval(next.onclick,1500); parent.onmouseover = function(){ clearInterval(parent_t); }; parent.onmouseout = function(){ parent_t = setInterval(next.onclick,1500); };</script></body></html>
原生 js 左右切换轮播图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。