Question

我正在尝试使用垂直滚动创建一个简单的图库。这个卷轴应该导致两件事：1。在大照片下方移动小图片，然后2.更改大照片的来源（因此它会改变结果中的大照片）。我没有描述我想要做什么，所以这里是代码：

html：

<div class="container">
<div class="bigPhoto">
    <img />
</div>
<ul>
    <li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=1' /></li>
    <li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=2' /></li>
    <li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=3' /></li>
    <li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=4' /></li>
    <li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=5' /></li>
    <li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=6' /></li>
    <li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=7' /></li>
    <li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=8' /></li>
    <li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=9' /></li>
    <li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=10' /></li>
    <li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=12' /></li>
    <li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=13' /></li>
    <li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=14' /></li>
    <li><img src='http://dummyimage.com/600x400/000/fff.jpg&text=15' /></li>

</ul>
<input type=range id='scroller' />

的CSS：

ul {
    border:1px solid orange;
    list-style-type: none;
    text-align: center;
    margin:0;
    padding:0;
    max-height: 50px;
    white-space: nowrap;
    overflow-y: hidden;
    overflow-x: scroll;}
li {
   display:inline-block;}
img {
   width:50px;}
.fullSize {
    width:100%;
    height:100%;}

JS：

var smallImages = document.querySelectorAll('li img');
var bigPhotoDiv = document.querySelector('.bigPhoto img');
var scroller = document.querySelector('#scroller');

bigPhotoDiv.src = smallImages[0].src;
bigPhotoDiv.classList.add('fullSize')

scroller.max = smallImages.length-1;
scroller.addEventListener('change', function(event) {
var currentLink = smallImages[scroller.value].src;
bigPhotoDiv.src = currentLink;
});

https://jsfiddle.net/0d2z26e1/

现在我有两个卷轴，较低的用于更改我的bigPhoto，而上面用于移动小图像。是否可以将它们合二为一？

结合两个卷轴 - 画廊与水平滚动

0 个答案: