前端之家收集整理的这篇文章主要介绍了
基于JS实现仿百度百家主页的轮播图效果，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
Box{
height:80px;
width:100%;
position:absolute;
bottom:0;
}
.
Box .title {
font-size: 18px;
line-height: 70px;
color: #fff;
font-family: "���ź�","Hiragino Sans GB";
display: block;
text-align:center;
}
.
Box .title:hover {
text-decoration: none;
color: #e05a5a;
}
=3)
{index=0;}
else {index=index+1;}
changePic(index);
/*$(".imgview img").css("display","none");*/
//$(".imgview img").attr("src",imgs[index]);
//alert(index);
}
//切换
图片
function changePic(index){
//alert(index);
$(".imgview a").css("display","none");
$(".
Box a").css("display","none");
$(".circles a").css("background","#000");
//var src=$(".imgview a:eq("+index+")").attr("target");
//alert(src);
$(".imgview a:eq("+index+")").css("display","inline");
$(".
Box a:eq("+index+")").css("display","block");
$(".circles a:eq("+index+")").css("background","red");
//alert(src);
}
//鼠标进入播放区域 暂停播放
$(".imgview").mouseenter(function(){
//alert("hi!");
clearInterval(circulate);
})
//鼠标移出播放区域 开始播放
$(".imgview").mouseleave(function(){
//alert("hi!");
circulate=setInterval(auto_play,2000);
})
//鼠标移入序号圆点 切换到序号所对应图
$(".circle").mouseenter(function(){
//如何确定当前circle的序号？
var num=$(this).index();
//alert(num);
clearInterval(circulate);
changePic(num);
circulate=setInterval(auto_play,2000);
});
//点击左边箭头 切换到上一张
$(".carousel-btn-prev").click(function(){
clearInterval(circulate);
//alert(index);
//1.现在处在第几张 ：index;
if(index==0)index=3;
else index=index-1;
changePic(index);
circulate=setInterval(auto_play,2000);
});
//点击右边箭头 切换到下一张
$(".carousel-btn-next").click(function(){
clearInterval(circulate);
//alert(index);
//1.现在处在第几张 ：index;
if(index==3)index=0;
else index=index+1;
changePic(index);
circulate=setInterval(auto_play,2000);
});
