<script>
var index=0;
var timer = playerAdvert();
//鼠標效果
$("#carousel_list a img").mouseenter(function () {
// 鼠標移入
clearInterval(timer);
}).mouseleave(function () {
// 鼠標移出
timer = playerAdvert();
});
//把 切換效果 封裝
function playerAdvert(){
return setInterval(function(){
if(index >= 4){
index = 0;
}
$("#carousel_list a").hide();
$("#carousel_list a").eq(index).show();
index++;
}, 1000);
}
</script>
<!--HTML部分-->
<!-- 輪播-->
<div id="carousel">
<div id="carousel_list">
<a href="#"><img src="images/carousel_01.jpg" alt="淘寶1號"></a>
<a href="#"><img src="images/carousel_02.jpg" alt="淘寶2號"></a>
<a href="#"><img src="images/carousel_03.jpg" alt="淘寶3號"></a>
<a href="#"><img src="images/carousel_04.jpg" alt="淘寶4號"></a>
</div>
</div>
<!--CSS部分-->
#carousel{
width: 520px;
height: 280px;
border:1px solid #666;
/*overflow:hidden;*/
}
#carousel_list a {
display:block;
}
#carousel_list a img{
border: 0px;
float: left;
}
/*四張照片都重疊*/
#carousel_list a{
position:absolute;
}