純js輪播測試版
阿新 • • 發佈：2018-01-25
post wid 背景 切換 round 效果 定時器 asc text
這是一個純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輪播測試版