2023.06.27 | admin | 123次围观
CSS
.ShowEntry{
height:inherit;
width:70%;
background:#00F;
margin-right:10px;
float:left;
position:relative;
}
.ShowEntry .carousel-btn-prev, .ShowEntry .carousel-btn-next {
position: absolute;
top: 130px;
width: 50px;
height: 50px;
z-index: 89;
}
.addBgi{
background-image:url(../image/%E5%9C%86.png);
background-repeat: no-repeat;
}
.ShowEntry .carousel-btn-prev {
left: 15px;
background-position: -10px -95px\9;
/*background-image:url(../image/%E5%B7%A6%E7%AE%AD%E5%A4%B4.png)*/
}
.ShowEntry .carousel-btn-next {
right: 15px;
background-position: -160px -95px\9;
}
.ShowEntry .icon-wrap {
position: relative;
display: block;
margin: 10% 0 0 10%;
width: 80%;
height: 80%;
/* z-index:99;*/
}
.player {
position: relative;
}
.player .imgview {
/*width: 670px;*/
height: 300px;
position: relative;
overflow: hidden;
background: #ccc;
}
.circles{
position: absolute;
bottom: 20px;
right: 0;
width: 80px;
height: 8px;
}
/*.player .circles .active*/
.active {
background: red;
opacity: 1;/*��ȫ����*/
}
.player .circles .circle {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
background:#000;
margin-left: 2px;
opacity: .7;
}
.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;
}
javascript
var index=0;
//周期：2秒 auto_play后不能加括号
var circulate=setInterval(auto_play,2000);//函数后面不能加括号
//自动播放
function auto_play(){
//alert(index);
if(index>=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);
});
关于“基于JS如何实现仿百度百家主页的轮播图效果”这篇文章就分享到这里了jquery仿支付宝首页焦点图片切换，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识jquery仿支付宝首页焦点图片切换，如果觉得文章不错，请把它分享出去让更多的人看到。
本文仅代表作者观点。
本文系作者授权发表，未经许可，不得转载。
发表评论