首页 > 代码库 > jquery 利用animate完成左右轮流切换图片
jquery 利用animate完成左右轮流切换图片
html部分
<div class="bag3 panel">
<div class="bg3_content">
<div class="bg3_img">
<div class="first2">
<div class="img_top">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="img_middle">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="img_bottom">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="second2">
<div class="img_top">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="img_middle">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="img_bottom">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
</div>
<div class="next_left"></div>
<div class="next_right"></div>
<div class="next1" ><div><a>|</a></div></div>
</div>
css部分
.bg3_content{
height: 385px;
width: 60%;
position: absolute;
left: 310px;
bottom: 148px;
overflow: hidden;
}
.bg3_img{
width: 2400px;
height: 100%;
position: absolute;
left: 0;
top: 0;
font-weight:bold;">purple;
}
.first2,.second2{
width: 900px;
height: 100%;
position: absolute;
}
.first2{
position: absolute;
top: 0px;
left: 0px;
}
.second2{
position: absolute;
top: 0px;
left: 900px;
}
/*第四屏左右切换*/
var num=1
$(".next_left").click(function(){
/// alert(num)
if(num==1){
$(".second2").css("left","-900px");
$(".first2").animate({left:"900px"},500,function () {
num++;
});
$(".second2").animate({left:"0px"},500,function () {
// $(".first2").css("marginLeft","900px");
});
} if(num==2){
$(".first2").css("left","-900px");
$(".second2").animate({left:"900px"},500,function () {
num=1
$(".second2").css("left","900px");
});
$(".first2").animate({left:"0px"},500,function () {
});
}
});
$(".next_right").click(function(){
/// alert(num)
if(num==1){
$(".first2").animate({left:"-900px"},500,function () {
num++;
$(".first2").css("left","900px");
});
$(".second2").animate({left:"0px"},500,function () {
// $(".first2").css("marginLeft","900px");
});
} if(num==2){
$(".second2").animate({left:"-900px"},500,function () {
num=1
$(".second2").css("left","900px");
});
$(".first2").animate({left:"0px"},500,function () {
});
}
});
jquery 利用animate完成左右轮流切换图片
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。