JavaScript簡易錄播圖 · 前端開發

JavaScript簡易錄播圖： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>輪播圖</title> <link rel="stylesheet" type="text/css" href="demo.css"/> <script src="https://creative.chat/resources/js/jquery-3.5.1.js"></script> <script src="demo.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="igs"> <a class="ig" href="#"><img src="images/image1.jpg" width="100%" /></a> <a class="ig" href="#"><img src="images/image2.jpg" width="100%" /></a> <a class="ig" href="#"><img src="images/image3.jpg" width="100%" /></a> <a class="ig" href="#"><img src="images/image4.jpg" width="100%" /></a> <a class="ig" href="#"><img src="images/image5.jpg" width="100%" /></a> <div class="btn btn1"><</div> <div class="btn btn2">></div> <ul id="tabs"> <li class="tab">1</li> <li class="tab">2</li> <li class="tab">3</li> <li class="tab">4</li> <li class="tab">5</li> </ul> </div> <style> * { margin: 0; padding: 0; } #igs { margin: 10px auto; width: 700px; height: 320px; position: relative; overflow: hidden; } .ig { position: absolute; } #tabs { position: absolute; list-style: none; /*background-color: rgba(255,255,255,.5);*/ left: 300px; bottom: 10px; border-radius: 10px; padding: 5px 0 5px 5px; } .tab{ float: left; text-align: center; line-height: 20px; width: 20px; height: 20px; cursor: pointer; overflow: hidden; margin-right: 4px; border-radius: 100%; background-color: rgb(200,100,150); /*background-color: #000; opacity: 0.3; filter: alpha(opacity=40); color: #fff;*/ } .btn{ position: absolute; color: #fff; top: 110px; width: 40px; height: 100px; background-color: rgba(255,255,255,.3); font-size: 40px; font-weight: bold; text-align: center; line-height: 100px; border-radius: 5px; margin: 0 5px; } .btn2{ position: absolute; right: 0px; } .btn:hover{ background-color: rgba(0,0,0,.7); cursor: pointer; } .tab:hover { color: #fff; } .bg{ background-color: #f00; color: #fff; } </style> <script> //定義全局變量和定時器 var i = 0 ; var timer; var number = 5; $(document).ready(function(){ //用jquery方法設置第一張圖片顯示，其余隱藏 $('.ig').eq(0).show().siblings('.ig').hide(); //調用showTime()函數（輪播函數） showTime(); //當鼠標經過下面的數字時，觸發兩個事件（鼠標懸停和鼠標離開） $('.tab').hover(function(){ //獲取當前i的值，并顯示，同時還要清除定時器 i = $(this).index(); Show(); clearInterval(timer); },function(){ // showTime(); }); //鼠標點擊左側的箭頭 $('.btn1').click(function(){ clearInterval(timer); if(i == 0){ i = number;//注意此時i的值 } i--; Show(); showTime(); }); //鼠標點擊右側的箭頭 $('.btn2').click(function(){ clearInterval(timer); if(i == number-1){ i = -1;//注意此時i的值 } i++; Show(); showTime(); }); }); //創建一個showTime函數 function showTime(){ //定時器 timer = setInterval(function(){ //調用一個Show()函數 Show(); i++; //當圖片是最后一張的后面時，設置圖片為第一張 if(i==number){ i=0; } },2000); } //創建一個Show函數 function Show(){ //在這里可以用其他jquery的動畫 $('.ig').eq(i).fadeIn(300).siblings('.ig').fadeOut(300); //給.tab創建一個新的Class為其添加一個新的樣式，并且要在css代碼中設置該樣式 $('.tab').eq(i).addClass('bg').siblings('.tab').removeClass('bg'); } </script> </body> </html> ```