Question

我目前正在为我的学校开展一个项目，我有一个图片幻灯片。

当我点击箭头时，会出现下一张图像。

但我想让它滑动并显示下一张照片。

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("MySlides");
  if (n > x.length) {
    slideIndex = 1
  }
  if (n < 1) {
    slideIndex = x.length
  }
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  x[slideIndex - 1].style.display = "block";
}

<img class="MySlides" src="http://lorempixel.com/400/400/sports/" width="380px;" height="380px;">
<img class="MySlides" src="http://lorempixel.com/400/400/food/" width="380px;" height="380px;" style="display:none;">
<img class="MySlides" src="http://lorempixel.com/400/400/cats/" width="380px;" height="380px;" style="display:none;">
<span><a OnClick="plusDivs(1)" class="links">&#8249;</a></span>
<span><a OnClick="plusDivs(-1)"class="rechts">&#8250;</a></span>

Answer 1

这是我的解决方案，具有真正的幻灯片效果：https://codepen.io/anon/pen/XMxGMw

var slideIndex = 0;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var slides = document.getElementsByClassName('slide');
  console.log(slides.length);
  if (n < 0) {
    slideIndex = slides.length - 1;
    n = slides.length - 1;
  } else if (n > slides.length - 1) {
    slideIndex = 0;
    n = 0;
  }
  for (i = 0; i < slides.length; i++) {
    var slide = slides[i];
    if (i < n) {
      slide.className = 'slide slide-previous';
    } else if (i === n) {
      slide.className = 'slide slide-selected';
    } else {
      slide.className = 'slide slide-next';
    }
  }
}

#slides-container {
  position: relative;
  width: 380px;
  height: 380px;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  height: 380px;
  width: 380px;
}

.slide-selected,
.slide-previous,
.slide-next {
  transition: transform 1s;
}

.slide-selected {
  z-index: 2;
  transform: translateX(0);
}

.slide-previous {
  z-index: 1;
  transform: translateX(-100%);
}

.slide-next {
  z-index: 1;
  transform: translateX(100%);
}

<div id="slides-container">
  <img class="slide" src="http://lorempixel.com/400/400/sports/">
  <img class="slide" src="http://lorempixel.com/400/400/food/">
  <img class="slide" src="http://lorempixel.com/400/400/cats/">
  <img class="slide" src="http://lorempixel.com/400/400/food/">
  <img class="slide" src="http://lorempixel.com/400/400/food/">
</div>
<span><a OnClick="plusDivs(-1)" class="links">&#8249;</a></span>
<span><a OnClick="plusDivs(1)"class="rechts">&#8250;</a></span>

这是一个更高级的版本，具有自动化和不同的动画：https://codepen.io/anon/pen/ryqRKX

Answer 2

＆＃13;

$("#slideshow > div:gt(0)").hide();

var index = 1;
var maxindex = $('#slideshow > div').length;

setInterval(function () {
    $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    $('ul li').removeClass('active');
    $('ul li:eq(' + index + ')').addClass('active');
    index = index < maxindex - 1 ? index + 1 : 0;
}, 3000);

for (var i = 0; i < maxindex; i++) {
    $('ul').append('<li class="' + (i == 0 ? 'active' : '') + '"></li>');
}

＆＃13;

#slideshow {
    margin: 50px auto;
    position: relative;
    width: 240px;
    height: 240px;
    padding: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
#slideshow > div {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

#slideshow img {
    max-width:240px;
    max-height:240px;
}

ul {
    list-style:none;
    margin:0px;
    padding:0px;
}
ul li {
    float:left;
    border-radius:10px;
    width:10px;
    height:10px;
    border:1px solid white;
    background:grey;
}
ul li.active {
    background:black;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<body>
<div id="slideshow">
<div>
<img class="MySlides" src="http://lorempixel.com/400/400/food/" width="380px;" height="380px;">
</div>
<div>
<img class="MySlides" src="https://www.w3schools.com/css/img_fjords.jpg" width="380px;" height="380px; ">
 </div>
 <ul></ul>

</div>
</body>

＆＃13;

如何将幻灯片放映动画添加到我的sider代码中

2 个答案: