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

  • 相关阅读:
    大数的加法
    tomcat jdbc DataSource资料
    转 spring的事务传播
    jmeter系列七(Visualizer的TestElement-ResultCollector)
    jmeter系列六(processor)
    jmeter系列五(Config配置元素)
    jmeter系列四(Visualizer)
    jmeter系列三(控制器controller)
    jmeter系列二(jmeter engine相关)
    jmeter系列一(jmeter界面相关无TestBean)
  • 原文地址:https://www.cnblogs.com/m110/p/7673992.html
Copyright © 2011-2022 走看看