jQuery实现图片走马灯/跑马灯的效果

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);
});