jquery 利用animate完成左右轮流切换图片
Posted yaomengli
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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完成左右轮流切换图片的主要内容，如果未能解决你的问题，请参考以下文章