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 () {


    });
    }


    });
  • 相关阅读:
    VMware安装ubuntu学习笔记(只是笔记)
    Apcahe Shiro学习笔记(二):通过JDBC进行权限控制
    Apcahe Shiro学习笔记(一):简介及运行官方Demo
    MyBatis学习(二):与Spring整合(非注解方式配置MyBatis)
    SpringMVC学习(一):搭建SpringMVC-注解-非注解
    java操作redis学习(一):安装及连接
    MyBatis学习(一):简单的运行
    Linux随笔记
    [搬运]一些构造题题解
    「不会」Min25筛
  • 原文地址:https://www.cnblogs.com/yaomengli/p/6938476.html
Copyright © 2011-2022 走看看