自動で画像をすぐに変更する

このコードは機能をクリックせずに必要です。私は時間に対して通常のスライドショーでそれを必要とします。自動で画像をすぐに変更する

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>

は

出典

2016-09-08 Anirban

で実行する私は質問を理解していない... jQueryのがロードされている場合は、上下のボタンは....仕事します？ – LinkinTED

代わりに '$（ '。arrow'）。on（）' $（document）.ready（） 'を使用してください。 – AZee

[' setInterval（） ']（http://www.w3schools.com/jsref/met_win_setinterval。 asp） – Pugazh

？

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>

出典

2016-09-08 10:31:45 LinkinTED

ありがとうございました。これはそれです。 – Anirban

は、この例を見ます。 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>

出典

2016-09-08 10:55:24

自動で画像をすぐに変更する

答えて

関連する問題