HTML
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>轮播图</title><link rel="stylesheet" href="css/common.css"/><link rel="stylesheet" href="css/carousel.css"/></head><body> ???<div class="carousel"> ???????<ul class="carousel-list"> ???????????<li><img src="img/1.jpg" /></li> ???????????<li><img src="img/2.jpg" /></li> ???????????<li><img src="img/3.jpg" /></li> ???????????<li><img src="img/4.jpg" /></li> ???????</ul> ???????<div class="direction-btn"> ???????????<a href="javascript:;" class="prev">></a> ???????????<a href="javascript:;" class="next"><</a> ???????</div> ???????<div class="dots"> ???????????<a href="javascript:;" class="active"></a> ???????????<a href="javascript:;"></a> ???????????<a href="javascript:;"></a> ???????????<a href="javascript:;"></a> ???????</div> ???</div> ???<script src="js/common.js"></script> ???<script src="js/carousel.js"></script></body></html>
common.js
??/* ???缓冲运动 ???obj：运动的对象 ???target：运动属性和终点值的对象 ???fn：回调函数 ???ratio：运动系数，默认值为8*/function bufferMove(obj,target,fn,ratio){ ???var ratio = ratio || 8; ???clearInterval(obj.timer); ???obj.timer = setInterval(function(){ ???????var allOK = true; ???????for(var attr in target){ ???????????var cur = 0; ???????????if(attr === ‘opacity‘){ ???????????????cur = parseInt(getStyle(obj,‘opacity‘) * 100); ???????????} else{ ???????????????cur = parseInt(getStyle(obj,attr)); ???????????} ???????????var speed = (target[attr] - cur) / ratio; ???????????speed = speed > 0? Math.ceil(speed) : Math.floor(speed); ???????????var next = cur + speed; ???????????if(attr === ‘opacity‘){ ???????????????obj.style.opacity = next /100; ???????????????obj.style.filter = ‘alpha( opacity = ‘ + next + ‘)‘; ???????????} else{ ???????????????obj.style[attr] = next + ‘px‘; ???????????} ???????????if(next !== target[attr]){ ???????????????allOK = false; ???????????} ???????} ???????if(allOK){ ???????????clearInterval(obj.timer); ???????????if(fn){ ???????????????fn(); ???????????} ???????} ???},50);}/////*// ???获取当前样式值//*/function getStyle(obj, attr) { ???if(obj.currentStyle) { ???????return obj.currentStyle[attr]; ???} else { ???????return getComputedStyle(obj, false)[attr]; ???}} //多属性函数封装 //封装获取样式的函数// ???function getStyle(obj,attr){// ???????if(obj.currentStyle){// ???????????return obj.currentStyle[attr];// ???????} else {// ???????????return getComputedStyle(obj,false)[attr];// ???????}// ???}//封装类名的获取 ???function byClassName(sClassName){ ???????if(document.getElementsByClassName){ ???????????return document.getElementsByClassName(sClassName); ???????} else { ???????????var all = document.getElementsByTagName(‘*‘); ???????????var result = []; ???????????for(var i = 0;i <all.length;i++){ ???????????????if(all[i].className === sClassName){ ???????????????????result.push(all[i]); ???????????????} ???????????} ???????????return result; ???????} ???}carousel.js// ???获取两个点击事件的元素var oBtn = byClassName(‘direction-btn‘)[0],// ???获取大盒子 ???oCarousel = byClassName(‘carousel‘)[0],// ???获取存储图片的ul ???oCarouselList = byClassName(‘carousel-list‘)[0],// ???获取ul下的li ???oCarouselLi = oCarouselList.children,// ???获取上一个的点击按钮 ???oPrev = byClassName(‘prev‘)[0],// ???获取下一个的点击按钮 ???oNext = byClassName(‘next‘)[0],// ?记录图片下标 ???index = 0;// ???定义点的下标 ???dotIndex = 0;// ???定义常量图片的宽度 ???const iPerW = 590;// ???定义定时器var ???timer = null;var oDots = byClassName(‘dots‘)[0];var oDotsA = Array.from(oDots.children);//遍历a ???oDotsA.forEach((v,k) =>{ ???????v.onmouseover = function(){ ???????????index = k; ???????????dotIndex = k; ???????????bufferMove(oCarouselList,{left:-index * iPerW}); ???????????setDotClass(); ???????} ???}) ???????function setDotClass(){ ???????//遍历每个a标签 ???????oDotsA.forEach(v => v.className=‘‘);// ???????右侧a判断 ???????if(dotIndex >= oDotsA.length){ ???????????dotIndex = 0; ???????}// ???????左侧a判断 ???????if(dotIndex < 0){ ???????????dotIndex = oDotsA.length - 1; ???????} ???????oDotsA[dotIndex].className = ‘active‘; ???} //添加第一张图片到末尾oCarouselList.innerHTML += oCarouselLi[0].outerHTML;//定义ul的总宽度oCarouselList.style.width = iPerW * oCarouselLi.length + ‘px‘;oCarousel.onmouseover = function(){ ???clearInterval(timer); ???oBtn.style.display = ‘block‘;}oCarousel.onmouseout = function(){ ???autoMove(); ???oBtn.style.display = ‘none‘;}//添加点击事件oNext.onclick = function(){ ???rightMove();}function rightMove(){ ???index++; ???dotIndex++; ???if(index >= oCarouselLi.length){ ???????index = 1; ???????oCarouselList.style.left = ‘0px‘; ???} ???bufferMove(oCarouselList,{left:-index * iPerW}); ???setDotClass();}//添加左侧点击事件oPrev.onclick = function(){ ???index--; ???dotIndex--; ???if(index < 0){ ???????index = oCarouselLi.length - 2; ???????oCarouselList.style.left = - (oCarouselLi.length - 1) ?* iPerW + ‘px‘; ???} ???bufferMove(oCarouselList,{left:-index * iPerW}); ???setDotClass();}//自动播放autoMove();function autoMove(){ ???timer = setInterval(function(){ ???????rightMove(); ???},3000);}
css文件
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ ???margin: 0; ???padding: 0;}body{ ???font-family:"Mrcrosoft Yahei",Arial;}ul,ol{ ???list-style: none;}a{ ???text-decoration: none;}img{ ???border:none;} body{ ???background:lightblue;}.carousel{ ???width: 590px; ???height: 340px; ???margin: 50px auto; ???overflow: hidden; ???position: relative;}.carousel-list{ ???position: absolute;}.carousel-list li{ ???float: left;}.direction-btn{ ???display: none;}.direction-btn a{ ???position: absolute; ???top: 50%; ???margin-top: -30px; ???width: 30px; ???line-height: 60px; ???background: rgba(0, 0, 0, .3); ???color: #fff; ???font-size: 30px; ???text-align: center;}.prev { ???left: 0;}.next { ???right: 0;}.dots{ ???position: absolute; ???background:rgba(255,255,255,.4); ???border-radius: 12px; ???width: 72px; ???left: 0; ???right: 0; ???bottom: 10px; ???margin: 0 auto; ???font-size: 0; ???line-height: 0; ???padding: 0 4px;}.dots a{ ???display: inline-block; ???width:10px; ???height: 10px; ???border-radius: 50%; ???background: #fff; ???margin: 6px 4px;}.dots .active{ ???background: red;}
图片更换成自己的路径即可
js之无缝轮播图
原文地址：https://www.cnblogs.com/bgwhite/p/9476330.html