zoukankan      html  css  js  c++  java
  • 图片轮播 按钮 自动 循环

    这图片轮播已经可以按钮轮播,自动轮播,循环,但还是有些许BUG,还存在些问题,而且代码也有点复杂,但能实现,期待以后可以接触到更简洁的方式。

    c = 1;
    a.eq(0).css("background-color","blue")
    function moveleft(){
    if(c != 4) {
    da.stop();
    da.animate({
    marginLeft: c * (-620) + "px"
    },
    500,
    function() {
    c++;
    })
    }
    if(c==4){
    da.animate({margin:0+"px"},1000,function(){})
    }
    if(c==1){
    a.eq(1).css("background-color","blue")
    a.eq(0).css("background-color","orange")
    a.eq(2).css("background-color","orange")
    a.eq(3).css("background-color","orange")
    }
    if(c==2){
    a.eq(2).css("background-color","blue")
    a.eq(0).css("background-color","orange")
    a.eq(1).css("background-color","orange")
    a.eq(3).css("background-color","orange")
    }
    if(c==3){
    a.eq(3).css("background-color","blue")
    a.eq(0).css("background-color","orange")
    a.eq(2).css("background-color","orange")
    a.eq(1).css("background-color","orange")
    }
    }
    // window.setInterval(moveleft,2000);



    left.click(function() {
    moveleft();
    })


    right.click(function() {
    if(c != 1) {
    da.stop();
    da.animate({
    marginLeft: (c - 2) * (-620) + "px"
    },
    500,
    function() {
    c--;
    })
    }
    if(c==2){
    a.eq(0).css("background-color","blue")
    a.eq(1).css("background-color","orange")
    a.eq(2).css("background-color","orange")
    a.eq(3).css("background-color","orange")
    }
    if(c==3){
    a.eq(1).css("background-color","blue")
    a.eq(0).css("background-color","orange")
    a.eq(2).css("background-color","orange")
    a.eq(3).css("background-color","orange")
    }
    if(c==4){
    a.eq(2).css("background-color","blue")
    a.eq(0).css("background-color","orange")
    a.eq(1).css("background-color","orange")
    a.eq(3).css("background-color","orange")
    }
    if(c==5){
    a.eq(3).css("background-color","blue")
    a.eq(0).css("background-color","orange")
    a.eq(2).css("background-color","orange")
    a.eq(1).css("background-color","orange")
    }
    })

    a.eq(0).click(function() {
    a.eq(0).css("background-color","blue")
    a.eq(1).css("background-color","orange")
    a.eq(2).css("background-color","orange")
    a.eq(3).css("background-color","orange")
    da.animate({
    marginLeft: 0 + "px"
    }, 500, function() {})
    })
    a.eq(1).click(function() {
    a.eq(1).css("background-color","blue")
    a.eq(0).css("background-color","orange")
    a.eq(2).css("background-color","orange")
    a.eq(3).css("background-color","orange")
    da.animate({
    marginLeft: (-620) + "px"
    }, 500, function() {})
    })
    a.eq(2).click(function() {
    a.eq(2).css("background-color","blue")
    a.eq(0).css("background-color","orange")
    a.eq(1).css("background-color","orange")
    a.eq(3).css("background-color","orange")
    da.animate({
    marginLeft: (-1240) + "px"
    }, 500, function() {})
    })
    a.eq(3).click(function() {
    a.eq(3).css("background-color","blue")
    a.eq(0).css("background-color","orange")
    a.eq(2).css("background-color","orange")
    a.eq(1).css("background-color","orange")
    da.animate({
    marginLeft: (-1860) + "px"
    }, 500, function() {})
    })

  • 相关阅读:
    贝塞尔曲线实现的购物车添加商品动画效果
    Rxjava学习(一基础篇)
    OkHttp3源码详解(三) 拦截器-RetryAndFollowUpInterceptor
    ViewDragHelper详解(侧滑栏)
    linux系统装windows时需要注意的问题
    ARM GCC 内嵌汇编手册
    ADS的默认连接分析及编译器产生符号解惑
    ARM 的Thumb状态测试
    load-store/register-memory/register-plus-memory比较
    进位位(carry)与溢出位(overflow)的区别
  • 原文地址:https://www.cnblogs.com/m110/p/7673992.html
Copyright © 2011-2022 走看看