14.凡客輪播圖效果 · 程序員開發筆記

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="fk.css"/> </head> <style> *{ padding: 0; margin: 0; } #fk{ width: 1200px; height: 535px; border: 4px solid purple; margin: 30px auto; position: relative; } #fk img{ position: absolute; left: 0; top: 0; display: none; } #fk ul{ position: absolute; left: 528px; bottom: 23px; } #fk ul li{ width: 12px; height: 12px; background: #DDDDDD; list-style: none; float: left; margin-right: 8px; border-radius: 50%; } </style> <body> <div id="fk"> <img src="images/1.jpg" style="display: block;" /> <img src="images/2.jpg" /> <img src="images/3.jpg" /> <img src="images/4.jpg" /> <img src="images/5.jpg" /> <img src="images/6.jpg" /> <ul> <li style="background: #A10000;"></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var c = 0; //定時器調用的函數 function autorun(){ c++; c = c==6?0:c; //讓c號圖片顯示,兄弟圖片隱藏 $("#fk img").eq(c).stop().fadeIn(200).siblings('img').stop().fadeOut(200); //讓c號li變紅,兄弟li變灰 $("#fk ul li").eq(c).css('background','#A10000').siblings('li').css("background",'#DDDDDD'); } var timer = setInterval(autorun,1000); //如果使用jquery, //移入事件建議寫成mouseenter //移出事件建議寫成mouseleave $("#fk").mouseenter(function(){ //清理定時器 clearInterval(timer); }) $("#fk").mouseleave(function(){ timer = setInterval(autorun,1000); }) //給小圓點加鼠標移入事件 $("#fk ul li").mouseenter(function(){ var jqthis = $(this); t = setTimeout(function(){ //獲得移入的li的序號 c = jqthis.index(); //讓c號圖片顯示,兄弟圖片隱藏 $("#fk img").eq(c).stop().fadeIn(200).siblings('img').stop().fadeOut(200); //讓c號li變紅,兄弟li變灰 $("#fk ul li").eq(c).css('background','#A10000').siblings('li').css("background",'#DDDDDD'); },200) }) $("#fk ul li").mouseleave(function(){ clearTimeout(t); }) </script> </body> </html>