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

  • 相关阅读:
    游戏开发中——垂直同步、绘制效率、显示器刷新频率与帧率
    python 异常
    python 多文件知识
    python if,for,while
    python 算术运算
    1.英语单词笔记
    Java import的作用
    java基础点
    Eclipse Java注释模板设置详解
    Java文档注释详解
  • 原文地址:https://www.cnblogs.com/m110/p/7673992.html
Copyright © 2011-2022 走看看