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

  • 相关阅读:
    架构,改善程序复用性的设计~(第一和第二讲目录)
    Linq To Sql模式中自动生成TSQL增删改操作系列~PropertyChanged事件实现在子类中记录属性的变化,在基类中进行统一处理
    架构,改善程序复用性的设计~第三讲 实现一种功能的代码只能出现在一处(续)
    oracle 11g PL/SQL Programming学习十四
    [翻译][php扩展和嵌入式]第19章设置宿主环境
    [翻译][php扩展和嵌入式]第17章php源代码的配置和链接
    40+精彩的HTML5实例和教程
    使用maven编译YCSB0.1.4对cassandra进行性能测试
    [翻译][php扩展和嵌入式]第18章php的扩展自动生成
    js 模仿windows 桌面图标排列算法
  • 原文地址:https://www.cnblogs.com/m110/p/7673992.html
Copyright © 2011-2022 走看看