Question

这是我的html文件

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8" content="text/html" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="Stylesheet" type="text/css" href="styles/grabel-home.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="js/slide.js" type="text/javascript"></script>
</head>
<body>
    <div id="container">
        <div id="slider">
            <img src="images/1.png" alt="" id="1" />
            <img src="images/2.png" alt="" id="2" />
            <img src="images/3.png" alt="" id="3" />
            <img src="images/4.png" alt="" id="4" />
            <img src="images/1.png" alt="" id="5" />
        </div>
    </div>
</body>
</html>

这是我的css文件

* {
    margin: 0px;
    padding: 0px;
    font-family: Calibri;
}

#container {
    width: 100%;
    height: 300px;
}

#slider {
    width: 100%;
    height: 300px;
}

#slider img {
    width: 100%;
    height: 300px;
    position: absolute;
    top: 0px;
    left: 0px;
}

#1 {
    z-index: 10;
}

#2 {
    z-index: 20;
}

#3 {
    z-index: 30;
}

#4 {
    z-index: 40;
}

#5 {
    z-index: 50;
}

这是我的javascript文件

$(document).ready(function(){

    var currentImg = 1;
    var animationSpeed = 4000;
    var index = 60;

    setInterval(function(){
        $("#"+currentImg).css("zIndex", index);
        index = index + 10;
        currentImg++;
        if(currentImg == 5){
            $("#1").css("zIndex", "10");
            $("#2").css("zIndex", "20");
            $("#3").css("zIndex", "30");
            $("#4").css("zIndex", "40");
            $("#5").css("zIndex", "50");
            currentImg = 1;
        }
    }, pause);
});

现在请问问题是我将所有图像叠加在一起作为每个具有不同z-index的图层，我想让它们之间的代码交换，如果它是滑块你得到它？！但这个代码似乎不起作用..为什么？并提前感谢

Answer 1

使用JavaScript更改元素属性时，我会使用本机方式：

document.getElementById(id).style.zIndex=1;

这更可靠。此外，使用z索引时，您需要确保设置了position属性。（如position:absolute）

Answer 2

试试这个，希望这会有所帮助...... :)

＆＃13;

$(document).ready(function() {

  var currentImg = 0;
  var animationSpeed = 2000;
  var v, play = "play";
  initSlider(play);

  function initSlider(type) {
    clearInterval(v);

    if (type == "pause") {
      clearInterval(v);
    } else if (type == "next") {
      var n = currentImg;
      currentImg < $('.slideImg').length - 1 ? n = currentImg + 1 : n = 0;
      $('.slideImg').removeClass('active').eq(n).addClass('active');
      currentImg = n;
      initSlider(play);

    } else if (type == "prev") {

      var p = 0;
      currentImg > $('.slideImg').length - 1 ? p = 0 : p = currentImg - 1;

      $('.slideImg').removeClass('active').eq(p).addClass('active');
      currentImg = p;

      initSlider(play);

    } else if (type == "play") {

      v = setInterval(function() {
        $('.slideImg').removeClass('active').eq(currentImg).addClass('active')
        currentImg++;
        if (currentImg > $('.slideImg').length - 1) {
          currentImg = 0;
          $('.slideImg').removeClass('active').eq(0).addClass('active');
        };

      }, animationSpeed);
    }
  };

  /*@@Controls code slider will work even without this*/
  $('.ctrlWrapper .ctrl').on('click', function() {

    if ($(this).hasClass('play')) {
      initSlider("play");
      $('.ctrlWrapper .ctrl').removeClass('active');
      $(this).addClass('active');
    } else if ($(this).hasClass('next')) {
      initSlider("next");
      $('.ctrlWrapper .ctrl').removeClass('active');
      $('.ctrlWrapper .ctrl.play').addClass('active');
    } else if ($(this).hasClass('prev')) {
      initSlider("prev");
    } else if ($(this).hasClass('pause')) {
      initSlider("pause");
      $('.ctrlWrapper .ctrl').removeClass('active');
      $('.ctrlWrapper .ctrl.play').addClass('active');
      $('.ctrlWrapper .ctrl').removeClass('active');
      $(this).addClass('active');
    };

  });

  /*@@slide Control code ends here*/

});

＆＃13;

* {
  margin: 0px;
  padding: 0px;
  font-family: Calibri;
}
#container {
  width: 100%;
  height: 300px;
}
#slider {
  width: 100%;
  height: 300px;
  overflow: hidden;
}
#slider img {
  width: 100%;
  height: 300px;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity ease 1s;
  -moz-transition: opacity ease 1s;
  -o-transition: opacity ease 1s;
  transition: opacity ease 1s;
}
#slider img.active {
  opacity: 1;
  z-index: 2;
  transition: opacity ease 1s;
}
.ctrlWrapper {
  padding: 5px;
  margin: 0 auto;
  text-align: center;
}
.ctrlWrapper .ctrl {
  display: inline-block;
  padding: 5px 10px;
  background: #eee;
  cursor: pointer;
  border: 1px solid #C7C7C7;
  transition: all ease .3s;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.ctrlWrapper .ctrl:hover {
  background: #888;
  color: #fff;
  border-color: #000;
}
.ctrlWrapper .ctrl.active {
  background: #FF9800;
  color: #000;
  border-color: #607D8B;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div id="slider">
    <img class="slideImg active" src="http://lorempixel.com/580/250/nature/1/" alt="" id="1" />
    <img class="slideImg" src="http://lorempixel.com/580/250/nature/2/" alt="" id="2" />
    <img class="slideImg" src="http://lorempixel.com/580/250/nature/3/" alt="" id="3" />
    <img class="slideImg" src="http://lorempixel.com/580/250/nature/4/" alt="" id="4" />
    <img class="slideImg" src="http://lorempixel.com/580/250/nature/5/" alt="" id="5" />
  </div>
</div>
<div class="ctrlWrapper">
  <div class="ctrl next">Next</div>
  <div class="ctrl prev">Prev</div>
  <div class="ctrl play active">Play</div>
  <div class="ctrl pause">Pause</div>
</div>

＆＃13;

有人可以帮我这个代码吗？

2 个答案: