zoukankan      html  css  js  c++  java
  • 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;
    60%;
    position: absolute;
    left: 310px;
    bottom: 148px;
    overflow: hidden;
    }

    .bg3_img{
    2400px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    font-weight:bold;">purple;

    }
    .first2,.second2{
    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 () {


    });
    }


    });
  • 相关阅读:
    了解AOP
    Struts2 拦截器与Spring AOP的区别
    Spring核心技术之IoC和AOP
    产品经理历险记-2-如何把需求聊得更细
    产品经理历险记-1-记录一次事故
    C# 使用 Lotus notes 公共邮箱发送邮件
    设计模式 5/23 原型模式
    设计模式 4/23 建造者模式
    设计模式 3/23 抽象工厂模式
    设计模式 2/23 工厂模式(二)
  • 原文地址:https://www.cnblogs.com/yaomengli/p/6938476.html
Copyright © 2011-2022 走看看