輪播圖思路：
1吃环、輪播圖布局
2、定時器實現(xiàn)輪播效果
3洋幻、指示器的鼠標移入（mouseenter）郁轻、移出（mouseleave）事件
輪播圖中的問題及解決辦法：
1、輪播圖中指示器小圓點的實現(xiàn)文留。
--> css3 border-radius屬性
2范咨、當鼠標停在指示器上，獲取當前序號 厂庇。
--> index()
3渠啊、鼠標在指示器上快速滑動，輪播出現(xiàn)白屏現(xiàn)象权旷。
--> 鼠標移入指示器停止Interval定時器替蛉，開啟一個setTimeout定時器，如鼠標在指示器停留時間超過200ms拄氯，則圖片指示器進行切換（同時關(guān)閉切換時的淡入淡出動畫躲查，防止堆積），否則鼠標移出指示器時關(guān)閉這個TImeout的定時器译柏，然后開啟Interval定時器镣煮。
運行效果圖：
輪播圖.gif
代碼（本文使用的jQuery版本是1.11.3，在低版本IE及W3C瀏覽器中效果相同）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#lb{
width: 1200px;
height: 535px;
margin: 50px auto;
border: 2px black solid;
position: relative;
overflow: hidden;
}
#lb img{
display: 'none';
}
#lb ul{
position: absolute;
right: 46%;
top: 500px;
}
*#lb ul li{
display: block;
background: #DDDDDD;
float: left;
width: 12px;
height: 12px;
margin-left: 8px;
list-style:none;
border-radius: 50%;
}
</style>
<script type="text/javascript" src="jquery.min.js"> </script>
<script type="text/javascript">
$(function(){
var i=0;
// 輪播定時器
var inTimer = setInterval(inRun,2000);
var outTimer;
//圖片及小圓點切換的方法
function inRun(){
i++;
i = (i==7)?0:i;
//圖片切換
$("#lb img").eq(i).fadeIn(500).siblings('img').fadeOut(500);
//小圓點切換
$("#lb ul li").eq(i).css({'background':'#A10000'}).siblings('li').css({'background':'#DDDDDD'});
}
//鼠標移入小圓點
$("#lb ul li").mouseenter(function(){
//獲取對象
var liThis = $(this);
//清除輪播動畫
clearInterval(inTimer);
//開啟定時器鄙麦，防止快速選擇小圓點
outTimer = setTimeout(function(){
i = liThis.index();
//通過小圓點切換典唇，停止關(guān)閉淡入淡出動畫
$("#lb img").eq(i).stop().fadeIn(500).siblings('img').stop().fadeOut(500);
//小圓點切換
$("#lb ul li").eq(i).css({'background':'#A10000'}).siblings('li').css({'background':'#DDDDDD'});
},200);
});
// 鼠標移出小圓點事件
$("#lb ul li").mouseleave(function(){
//清除掉防止圖片快速切換
clearTimeout(outTimer);
//鼠標移出小圓點時開啟圖片輪播定時器
inTimer = setInterval(inRun,2000);
});
})
</script>
<body>
<div id="lb">
<ul>
<li style="background: #A10000;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
下載：https://github.com/wangwei66666/FKSlideShow
如有問題歡迎交流。
如轉(zhuǎn)載請注明出處胯府，謝謝介衔！
