私は車の写真の周りにコンテナを作って、を使ってスクロールすることができます。どのように私はそれを作ることができますので、私はクリックすることができますので、私はボタンを使用してそれらをスクロールすることができますjavascriptまたはjqueryを介して2つのボタンがありますか？ Javascript - ボタンでdivをスライドさせる

現在のHTMLは次のとおりです。

<div class="event_container"> 

      <a href="/index.php?con=events&id=5"> 
     <div style="display: inline-block; background-image: url('img/events/event5.jpg')" class=""> 
      <p>Kør med de store!</p> 
      <p>18-01-2017</p> 
      <div style="display: inline-block" class="tile"></div> 
     </div> 
    </a> 
       <a href="/index.php?con=events&id=3"> 
     <div style="display: inline-block; background-image: url('img/events/event3.jpg')" class=""> 
      <p>Den nye FIAT 500!</p> 
      <p>24-01-2017</p> 
      <div style="display: inline-block" class="tile"></div> 
     </div> 
    </a> 
       <a href="/index.php?con=events&id=1"> 
     <div style="display: inline-block; background-image: url('img/events/event1.jpg')" class=""> 
      <p>Event 1</p> 
      <p>30-04-2017</p> 
      <div style="display: inline-block" class="tile"></div> 
     </div> 
    </a> 
       <a href="/index.php?con=events&id=2"> 
     <div style="display: inline-block; background-image: url('img/events/event2.jpg')" class=""> 
      <p>Test kør bughatti!</p> 
      <p>03-06-2017</p> 
      <div style="display: inline-block" class="tile"></div> 
     </div> 
    </a> 
       <a href="/index.php?con=events&id=4"> 
     <div style="display: inline-block; background-image: url('img/events/event4.jpg')" class=""> 
      <p>Skal du køre suziki?</p> 
      <p>30-06-2017</p> 
      <div style="display: inline-block" class="tile"></div> 
     </div> 
    </a>

出典

2017-01-04 Daniel Juhl Sørensen

あなたは、インターネット上の任意のスライドショープラグインを探したことがありますか？ – Ionut

カルーセルまたはスライダーを使用します。 – Gabbax0r

滑らかなスライダを推奨します。 –

私は車の絵の周りのコンテナを作った、とオーバーフロー-Yを使用します。スクロールを、私はそれらをスクロールすることができるように。どうすればいいのですか？ボタンをクリックすると、ボタンでスクロールすることができます。 javascriptまたはjquery？

ここにある3使用してのアプローチ：CSSトランジションを使用しています

jQueryの
無地のJavaScript
CSSとJavaScript

最後のアプローチがスムーズと最高のアニメーションを提供します。（3）

アプローチ1

あなたは上下に画像をスクロールするjQueryのカスタムanimate({scrollTop: [value]})メソッドを使用することができます。

のjQueryでの作業例：（3）

$(document).ready(function(){ 
 
    
 
    $('button').eq(0).click(function(){ 
 
     $('div').animate({scrollTop: $('div').scrollTop() -158 + 'px'}); 
 
    }); 
 
    
 
    $('button').eq(1).click(function(){ 
 
     $('div').animate({scrollTop: $('div').scrollTop() +158 + 'px'}); 
 
    }); 
 

 
});

div, img, button { 
 
display: inline-block; 
 
vertical-align: top; 
 
} 
 

 
div { 
 
width: 596px; 
 
height: 152px; 
 
padding: 12px; 
 
background-color: rgb(63,63,63); 
 
overflow-y: auto; 
 
} 
 

 
img { 
 
display: inline-block; 
 
width: 100px; 
 
height: 140px; 
 
margin: 6px 6px 12px; 
 
color: rgb(255,255,255); 
 
background-color: rgb(255,127,0); 
 
} 
 

 
img:last-of-type { 
 
margin-bottom: 24px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div> 
 
<img alt="image-1" /> 
 
<img alt="image-2" /> 
 
<img alt="image-3" /> 
 
<img alt="image-4" /> 
 
<img alt="image-5" /> 
 

 
<img alt="image-6" /> 
 
<img alt="image-7" /> 
 
<img alt="image-8" /> 
 
<img alt="image-9" /> 
 
<img alt="image-10" /> 
 

 
<img alt="image-11" /> 
 
<img alt="image-12" /> 
 
<img alt="image-13" /> 
 
<img alt="image-14" /> 
 
<img alt="image-15" /> 
 
</div> 
 

 
<button type="button">Scroll Up</button> 
 
<button type="button">Scroll Down</button>

アプローチ2

あなたはjQueryのをスキップしたい場合は、ここで使用する代替バージョンがあります平凡なjavascript。平野JavaScriptで

の作業例：

var buttons = document.getElementsByTagName('button'); 
 
var imageContainer = document.getElementsByTagName('div')[0]; 
 
var scrollValue; 
 
var scrollDirection; 
 

 
function scroll() { 
 
\t scrollDirection = (this.textContent === 'Scroll Down' ? 1 : -1); 
 
\t scrollValue = (this.textContent === 'Scroll Down' ? 158 : -158); 
 
    var startPoint = imageContainer.scrollTop; 
 

 
    var scrollDiv = setInterval(function() { 
 
     imageContainer.scrollTop += scrollDirection; 
 
     if (imageContainer.scrollTop === (startPoint + scrollValue)) { 
 
     \t scrollDirection = 0; 
 
      clearInterval(scrollDiv); 
 
     } 
 
    }, 1); 
 
} 
 

 
for (var i = 0; i < buttons.length; i++) { 
 
    buttons[i].addEventListener('click', scroll, false); 
 
}

div, img, button { 
 
display: inline-block; 
 
vertical-align: top; 
 
} 
 

 
div { 
 
width: 596px; 
 
height: 152px; 
 
padding: 12px; 
 
background-color: rgb(63,63,63); 
 
overflow-y: auto; 
 
} 
 

 
img { 
 
display: inline-block; 
 
width: 100px; 
 
height: 140px; 
 
margin: 6px 6px 12px; 
 
color: rgb(255,255,255); 
 
background-color: rgb(255,127,0); 
 
} 
 

 
img:last-of-type { 
 
margin-bottom: 24px; 
 
}

<div> 
 
<img alt="image-1" /> 
 
<img alt="image-2" /> 
 
<img alt="image-3" /> 
 
<img alt="image-4" /> 
 
<img alt="image-5" /> 
 

 
<img alt="image-6" /> 
 
<img alt="image-7" /> 
 
<img alt="image-8" /> 
 
<img alt="image-9" /> 
 
<img alt="image-10" /> 
 

 
<img alt="image-11" /> 
 
<img alt="image-12" /> 
 
<img alt="image-13" /> 
 
<img alt="image-14" /> 
 
<img alt="image-15" /> 
 
</div> 
 

 
<button type="button">Scroll Up</button> 
 
<button type="button">Scroll Down</button>

アプローチ3（3）あなたが指摘しているうよう

、すぐに上記のように出くわすjavascriptのアプローチ無地少し遅くぎこちない。結局のところ（すべてのアニメーションと同様に）、最適なアプローチは、アニメーションを処理するためにいくつかのCSSを配備することです。CSSとJavaScriptで平野

の作業例は：

var buttons = document.getElementsByTagName('button'); 
 
var images = document.getElementsByTagName('img'); 
 
var scrollValue; 
 

 
function scroll() { 
 
\t var imageTransformStyle = window.getComputedStyle(images[0]).transform; 
 
\t var yStart = (imageTransformStyle.lastIndexOf(',') + 2); 
 
\t var yEnd = imageTransformStyle.lastIndexOf(')'); 
 
    
 
\t var currentPosition = Number(imageTransformStyle.substring(yStart, yEnd)); 
 
\t scrollValue = (this.textContent === 'Scroll Down') ? -158 : 158; 
 
\t var newPosition = currentPosition + scrollValue; 
 
    
 
\t if (newPosition > 0) {newPosition = 0;} 
 
\t if (newPosition < -316) {newPosition = -316;} 
 

 
\t for (var i = 0; i < images.length; i++) { 
 
\t  images[i].style.transform = 'translateY(' + newPosition + 'px)'; 
 
    } 
 
} 
 

 
for (var i = 0; i < buttons.length; i++) { 
 
    buttons[i].addEventListener('click', scroll, false); 
 
}

div, img, button { 
 
display: inline-block; 
 
vertical-align: top; 
 
} 
 

 
div { 
 
width: 578px; 
 
height: 152px; 
 
padding: 12px; 
 
background-color: rgb(63,63,63); 
 
overflow-y: hidden; 
 
} 
 

 
img { 
 
display: inline-block; 
 
width: 100px; 
 
height: 140px; 
 
margin: 6px 6px 12px; 
 
color: rgb(255,255,255); 
 
background-color: rgb(255,127,0); 
 
transform: translateY(0); 
 
transition: transform 0.5s ease-out; 
 
} 
 

 
img:last-of-type { 
 
margin-bottom: 24px; 
 
}

<div> 
 
<img alt="image-1" /> 
 
<img alt="image-2" /> 
 
<img alt="image-3" /> 
 
<img alt="image-4" /> 
 
<img alt="image-5" /> 
 

 
<img alt="image-6" /> 
 
<img alt="image-7" /> 
 
<img alt="image-8" /> 
 
<img alt="image-9" /> 
 
<img alt="image-10" /> 
 

 
<img alt="image-11" /> 
 
<img alt="image-12" /> 
 
<img alt="image-13" /> 
 
<img alt="image-14" /> 
 
<img alt="image-15" /> 
 
</div> 
 

 
<button type="button">Scroll Up</button> 
 
<button type="button">Scroll Down</button>

出典

2017-01-04 10:47:51 Rounin

あなたは、移動した画像をより快適にするためにjQueryを使ってアニメーションのアクションを行うことができます。以下の例を試してみてください。

var outer = $('.container'); 
 

 
$('#right').click(function() { 
 
    outer.animate({scrollLeft: '+=30px'}, 500); 
 
}); 
 

 
$('#left').click(function() { 
 
    outer.animate({scrollLeft: '-=30px'}, 500); 
 
}); 
 

 
$('#top').click(function() { 
 
    outer.animate({scrollTop: '-=30px'}, 500); 
 
}); 
 

 
$('#bottom').click(function() { 
 
    outer.animate({scrollTop: '+=30px'}, 500); 
 
});

.container { 
 
    width: 100px; 
 
    height: 100px; 
 
    overflow: scroll; 
 
} 
 

 
.inner { 
 
    width: 300px; 
 
    background-color: red; 
 
    font-size: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="inner"> 
 
    A B C D E F G 1 2 3 4 5 6 7 8 9 
 
    ------------------------------- 
 
    9 8 7 6 5 4 3 2 1 A B C D E F G 
 
    </div> 
 
</div> 
 

 
<button id="left"> < </button><button id="right"> > </button> 
 
    
 
<button id="top">^</button><button id="bottom"> V </button>

出典

2017-01-04 11:40:21 VadimB

Javascript - ボタンでdivをスライドさせる

答えて

アプローチ1

アプローチ2

アプローチ3（3）あなたが指摘しているうよう

関連する問題