jQuery實現圖片走馬燈/跑馬燈的效果，實現無限自動輪播的效果。鼠標經過時暫停輪播，鼠標離開繼續輪播。
效果：
css：
.ExpertList{margin-top: 50px;overflow: hidden;position: relative;text-align: center;}
.ExpertList ul{overflow: auto;}
.ExpertList ul li{float: left;box-sizing: border-box;text-align: center;display: inline-block;width: 200px;list-style:none;}
.ExpertList ul li img{height: 140px;}
.ExpertList ul li p{font-size: 14px;color: #000;line-height: 22px;}
Html:
<div class="ExpertList">
<ul>
<li>
<img src="../images/Home/expert01.png" alt="Michael Littlewood" title="Michael Littlewood"/>
<p>Michael Littlewood</p>
<p>澳門金沙娛樂場</p>
</li>
<li>
<img src="../images/Home/expert02.png" alt="董德剛" title="董德剛"/>
<p>董德剛</p>
<p>航美傳媒</p>
</li>
<li>
<img src="../images/Home/expert03.png" alt="Thomas Morel" title="Thomas Morel"/>
<p>Thomas Morel</p>
<p>德高集團</p>
</li>
<li>
<img src="../images/Home/expert04.png" alt="Michael Littlewood" title="Michael Littlewood"/>
<p>Michael Littlewood</p>
<p>澳門金沙娛樂場</p>
</li>
<li>
<img src="../images/Home/expert05.png" alt="孚馳索思" title="孚馳索思"/>
<p>Chris Mcintyre-Brown</p>
<p>孚馳索思</p>
</li>
<li>
<img src="../images/Home/expert06.png" alt="孚馳索思" title="孚馳索思"/>
<p>Chris Mcintyre-Brown</p>
<p>孚馳索思</p>
</li>
</ul>
<!--左右白色漸變蒙版-->
<div class="ExpertLeft"></div>
<div class="Expertright"></div>
</div>
js:
//獲取窗口的寬度
var width_window=$(window).width();
var liLengthu,BoxWidth,ExpertHtml,ExpertList;
var a=1,b=1;
$(function(){
//輪播
Expert();
});
function Expert(){
//獲取li的個數
liLengthu=$(".ExpertList ul li").length;
//獲取輪播盒子的寬度
BoxWidth=$(".ExpertList").outerWidth();
//輪播的內容
ExpertHtml=$(".ExpertList ul").html();
//如果li的個數不夠6個 就循環添加
if(liLengthu<6){
for(var i=liLengthu;i<6;i++){
$(".ExpertList ul").append(ExpertHtml);
}
}else{
}
ExpertHtml=$(".ExpertList ul").html();
$(".ExpertList ul").append(ExpertHtml);
liLengthu=$(".ExpertList ul li").length;
$(".ExpertList ul").css({"width":liLengthu*200+"px"});
ExpertList = setInterval(ExpertBanner,20);
}
//輪播
function ExpertBanner(){
a++;
b++;
if(b>=BoxWidth-200){
b=1;
$(".ExpertList ul").append(ExpertHtml);
liLengthu=$(".ExpertList ul li").length;
$(".ExpertList ul").css({"width":liLengthu*200+"px"});
}else{
}
$(".ExpertList ul").css({"margin-left":"-"+a+"px"});
}
//鼠標hover時 暫停輪播
$(document).on("mouseover",".ExpertList",function(){
clearInterval(ExpertList);
});
//鼠標離開時 繼續輪播
$(document).on("mouseout",".ExpertList",function(){
ExpertList = setInterval(ExpertBanner,20);
});