这是一个纯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>