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

  • 相关阅读:
    保险精算导论
    天津大学C语言程序设计
    会计学
    WIN10 CH340安装失败
    好用的浏览器插件
    好用的壁纸软件
    30讲 窗口看门狗
    STM32替换Arduino直通车
    stm32系列芯片独立看门狗(IWDG)溢出时间计算原理
    AD 电子元器件图片、名称及符号对照
  • 原文地址:https://www.cnblogs.com/m110/p/7673992.html
Copyright © 2011-2022 走看看