这是一个纯js写的轮播测试版，代码有待改进
<!DOCTYPE html><html><head> ???<meta charset="utf-8"> ???<title></title> ???<script type="text/javascript" src="js/function.js"></script> ???<style type="text/css"> ???????.ndiv{ ???????????width: 2060px; ???????????position: relative; ???????} ???????.wdiv{ ???????????width: 497px; ???????????overflow: hidden; ???????????height: 177px; ???????????position: relative; ???????} ???????img{ ???????????????????????margin-left: -4px; ???????} ???????ul{margin-top: -50px; ???????} ???????li{ ???????????list-style: none; ???????????width: 20px; ???????????height: 20px; ???????????float: left; ???????????background-color: blue; ???????????text-align: center; ???????????line-height: 20px; ???????????border-radius: 50%; ???????????color: white; ???????????margin-right: 10px; ???????} ???????.nu{ ???????????position: relative; ???????????width: 180px; ???????????margin:0 auto; ???????????z-index: 999; ???????} ???????.wdiv:hover .ltr{ ???????????width: 40px; ???????????height: 100%; ???????????position: absolute; ???????????top: 0px; ???????????left: 0px; ???????????background-color: rgba(255,0,255,0.6); ???????} ???????.wdiv:hover .rtl{ ???????????width: 40px; ???????????height: 100%; ???????????position: absolute; ???????????top: 0px; ???????????right: 0px; ???????????background-color: rgba(255,0,255,0.6); ???????} ???</style></head><body>
???<div class="wdiv"> ???<div class="ndiv"> ???????<img src="img/s_banner1.jpg" width="500" > ???????<img src="img/s_banner2.jpg" width="500" > ???????<img src="img/s_banner3.jpg" width="500" > ???????<img src="img/s_banner1.jpg" width="500" > ???</div>
//轮播的3张图片，最后一张图伪装成第一张图，达到“好像回到开头”的感觉 ???<div class="nu"> ???????<ul> ???????????<li>1</li> ???????????<li>2</li> ???????????<li>3</li> ???????</ul> ???</div>
//li标签里是切换的按钮（功能未实装）
???<div class="ltr"></div> ???<div class="rtl"></div> ???</div> ???<script type="text/javascript"> ???????var clo=setTimeout(function(){clo2=setInterval(ds, 1)},2000); ???????????????????????i=i+2; ???????var time=0; ???????getTag(‘div‘)[1].style.marginLeft="0px"; ????????var i=0; ????????test(); ???????????getTag("li")[0].style.background="white"; ???????????getTag("li")[0].style.color="black"; ???????function ds(){ ???????????????if (i<=500) { ???????????????i=i+1; ???????????????time=time-1; ???????????????test(); ???????????????getTag("li")[1].style.background="white"; ???????????????getTag("li")[1].style.color="black"; ???????????????getTag(‘div‘)[1].style.marginLeft=time+"px"; ???????????????}else if(i>=501&&i<=502){ ???????????????????clearTimeout(clo); ???????????????????clearInterval(clo2); ????????????????????????????????????????setTimeout(function(){clo2=setInterval(ds, 1)},2000); ???????????????????????i=i+1; ???????????????}else if(i>=501&&i<=1000){ ???????????????????i=i+1; ???????????????????time=time-1; ???????????????????test(); ???????????????????getTag("li")[2].style.background="white"; ???????????????????getTag("li")[2].style.color="black"; ???????????????????getTag(‘div‘)[1].style.marginLeft=time+"px"; ???????????????}else if (i>=1001&&i<=1002) { ???????????????????clearTimeout(clo); ???????????????????clearInterval(clo2); ???????????????????setTimeout(function(){clo2=setInterval(ds, 1)},2000); ???????????????????i=i+1; ???????????????}else if (i>=1002&&i<=1500){ ???????????????????i=i+1; ???????????????????time=time-1; ????????????????????test(); ????????????????????getTag("li")[0].style.background="white"; ????????????????????getTag("li")[0].style.color="black"; ???????????????????getTag(‘div‘)[1].style.marginLeft=time+"px";} ???????????????????????????????????else if (i>=1501&&i<=1502) { ???????????????????i=i+1; ???????????????????clearTimeout(clo); ???????????????????clearInterval(clo2); ????????????????????setTimeout(function(){clo2=setInterval(ds, 1)}); ???????????????}else if (i>=1502&&i<=1503){ ???????????????????clearTimeout(clo); ???????????????????clearInterval(clo2); ???????????????????getTag("li")[0].style.background="white"; ???????????????????getTag("li")[0].style.color="black"; ????????????????????setTimeout(function(){clo2=setInterval(ds, 1)},2000); ????????????????????i=0; ????????????????????time=0; ???????????????} ???????????} ???????????function test(){ ???????????????for (var i = 0; i < 3; i++) { ???????????????getTag("li")[i].style.background="blue"; ???????????????getTag("li")[i].style.color="white"; ???????????????} ???????????}
//在js中操控定时器来达到滚动的效果，用延时定时器达到停止一会
//test函数配合数字初始化背景颜色和字体颜色 ???</script></body></html>纯js轮播测试版
原文地址：https://www.cnblogs.com/LastFire/p/8352923.html