Question

您好，我仍然是相当新的代码，我正在开发一个新的网站，我想使用jquery实现自动幻灯片放映，但它的工作很古怪。

它允许图片更改，但在第一次成功滑动后，其他图片会在幻灯片下方滑动显示。

我的HTML：

<!doctype html>
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

    <!-- <link rel="external" type="text/javascript" href="jquery.js"> -->
    <link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>
    <script src="jquery.js"></script>

    <div class="slideshow">

        <div>
            <img src="file:///C:/Users/angela/Documents/sandbox/photos/sampleone.png" alt='' width='100%' height='100%'>
        </div>

        <div>
            <img src="file:///C:/Users/angela/Documents/sandbox/photos/sampletwo.png" alt='' width='100%' height='100%'>
        </div>

        <div>
            <img src="file:///C:/Users/angela/Documents/sandbox/photos/wood.png" alt='' width='100%' height='100%'>
        </div>

    </div>

</body>
</html>

我的css：

.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; 
}

我的jquery：

$(document).ready(function(){
    $('.slideshow img:gt(0)').hide();

setInterval(function() { 
  $('.slideshow :first-child')
    .fadeOut(1000)
    .next('img')
    .fadeIn(1000)
    .end()
    .appendTo('.slideshow');},
    3000);

});

Answer 1

试试这个：

＆＃13;

    function startSlides(start, end, delay) {
      setTimeout(slideshow(start, start, end, delay), delay);
    }

    function slideshow(frame, start, end, delay) {
        return (function() {
          $('#slideshow' + frame).fadeOut();
          if (frame == end) {
            frame = start;
          } else {
            frame += 1;
          }
          setTimeout(function() {
            $('#slideshow' + frame).fadeIn();
          }, 850);
          setTimeout(slideshow(frame, start, end, delay), delay + 850);
        })
      }
      // usage: startSlides(first frame, end frame, delay time);
    startSlides(1, 4, 5000);

＆＃13;

.slide {
  height: 200px;
  width: 300px;
  padding: 1em;
  margin: 1em auto;
  display: table;
}
.slide div {
  border: 2px solid #fff;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
  color: #fff;
  font-family: monospace;
  font-size: 3em;
}
#slideshow1 {
  background: #faa;
}
#slideshow2 {
  background: #afa;
}
#slideshow3 {
  background: #aaf;
}
#slideshow4 {
  background: #000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow1" class="slide">
  <div>frame 1</div>
</div>
<div id="slideshow2" class="slide" style="display: none">
  <div>frame 2</div>
</div>
<div id="slideshow3" class="slide" style="display: none">
  <div>frame 3</div>
</div>
<div id="slideshow4" class="slide" style="display: none">
  <div>frame 4</div>
</div>

＆＃13;

另外，我建议使用OwlCarousel的一些东西，它会让你的生活更轻松： https://github.com/OwlFonk/OwlCarousel

我的幻灯片显示无法正常工作

1 个答案: