Question

我需要这些代码而不点击功能。我需要它与正常的幻灯片时间。

我的意思是图像会在5秒后自动更改。

var gallery = $('.content'),
    height = gallery.height();

$('.arrow').on('click', function(){
    var up = $(this).is('.up_arrow');
    
    if (up) {
        gallery.animate({'scrollTop': '-=' + height});
    } else {
        gallery.animate({'scrollTop': '+=' + height});        
    }
});

.content{
    width:400px;
    height:300px;
    overflow:hidden;
    border:1px solid #999;
}
.content img{display:block;}
.arrow{
    display:inline-block;
    padding:5px 15px;
    background:#eee;
    border-radius:3px;
    margin:3px 0;
    cursor:pointer;
    border:1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="arrow up_arrow">UP</div>
<div class="content">
    <img src="http://placehold.it/400x300?text=image+1">
    <img src="http://placehold.it/400x300?text=image+2">
   <img src="http://placehold.it/400x300?text=image+3">
</div>
<div class="arrow down_arrow">DOWN</div>

Answer 1

喜欢这个吗？

var gallery = $('.content'),
    height = gallery.height(),
    scrollHeight = gallery[0].scrollHeight,
    y = 0;

$(function() {
  setInterval(function() {
    y += height;
    if( y >= scrollHeight ) {
      y = 0;
    }
    gallery.animate({'scrollTop':  y });
  }, 2000);
});

.content{
    width:400px;
    height:300px;
    overflow:hidden;
    border:1px solid #999;
}
.content img{display:block;}
.arrow{
    display:inline-block;
    padding:5px 15px;
    background:#eee;
    border-radius:3px;
    margin:3px 0;
    cursor:pointer;
    border:1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content">
    <img src="http://placehold.it/400x300?text=image+1">
    <img src="http://placehold.it/400x300?text=image+2">
   <img src="http://placehold.it/400x300?text=image+3">
</div>

Answer 2

查看此示例。用plunker运行

// Add your javascript here
$(function(){
 var gallery = $('.content'),
  height = gallery.height();
  


  setInterval(function(){ 
 
 gallery.animate({'scrollTop': '+=' + height},1000,function(){
 gallery.animate({'scrollTop':0},0);
  gallery.append($('.content img:first'));
 }); 

   }, 5000);
   
   });

/* Put your css in here */

h1 {
  color: red;
}

.content{
    width:400px;
    height:300px;
    overflow:hidden;
    border:1px solid #999;
}
.content img{display:block;}
.arrow{
    display:inline-block;
    padding:5px 15px;
    background:#eee;
    border-radius:3px;
    margin:3px 0;
    cursor:pointer;
    border:1px solid #ddd;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title><!-- Title here --></title>
    <link data-require="jqueryui" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <script data-require="jqueryui" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
<div class="content">
    <img src="http://placehold.it/400x300?text=image+1">
    <img src="http://placehold.it/400x300?text=image+2">
   <img src="http://placehold.it/400x300?text=image+3">
</div>
  </body>

</html>

自动更改图像，直至按时

2 个答案: