图库图像滑块

Question

我不是要求代码或任何东西。我在下面有这个部门，我想把它作为一个滑块，所以当用户点击时，当前显示将向左移动，并且会出现一个不同但看起来相同的分区。我是网站开发的新手，我只需要一些关于搜索内容的指导，以及是否有任何可能有益的链接。谢谢。

HTML：

     <div id="first">
<img id="image1" src="http://placehold.it/350x150"/>
<img id="image2" src="http://placehold.it/350x150"/>
<img id="image3" src="http://placehold.it/350x150"/>
<img id="image4" src="http://placehold.it/350x150"/>
<img id="image5" src="http://placehold.it/350x150"/>
<img id="image6" src="http://placehold.it/350x150"/>
<img id="image7" src="http://placehold.it/350x150"/>
<img id="image8" src="http://placehold.it/350x150"/>
<img id="image9" src="http://placehold.it/350x150"/>
<img id="image10"src="http://placehold.it/350x150"/>
</div>

CSS：

#first
{
    display: none;
    width: 50%;
    height: 220px;
    margin:auto;
    padding-left: 150px;
    margin-top: -215px;
}
#first img 
{
    height: 100px;
    width: 100px;
    float:left;
    margin-right: 5%;
}

形状：

Answer 1

在左侧或右侧图片的每一侧添加一些箭头，然后在溢出的隐藏式div中包装两张图片之后尝试这样的事情：

window.left = function () {
    $('img:first').before($('img:last').get(0).outerHTML);
    $('img:last').remove();
}
window.right = function () {
    $('img:last').before($('img:first').get(0).outerHTML);
    $('img:first').remove();
}

＆＃13;

＆＃13;

$('img:even').css('opacity','.6');  // make even images lighter

window.left = function () {
    $('img:first').before($('img:last').get(0).outerHTML);  // copy the last picture before the first one.
    $('img:last').remove();  // remove the last picture from the end of the stack.
}
window.right = function () {
    $('img:last').before($('img:first').get(0).outerHTML);  // copy the first picture after the last one.
    $('img:first').remove();  // remove the first picture from the beginning of the stack
}

＆＃13;

html {
    font-size: 50px;
}
#first {
    overflow: hidden;
    height: 150px;
    width: 740px;
}
img {
    margin-left: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>
            <p onclick="left()">
                <</p>
        </td>
        <td>
            <div id="first" style="display:inline-block;">
                <img id="image1" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image2" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image3" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image4" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image5" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image6" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image7" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image8" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image9" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
                <img id="image10" src="https://coderwall-assets-0.s3.amazonaws.com/uploads/picture/file/1824/350x150.gif" />
            </div>
        </td>
        <td>
            <p onclick="right()">></p>
        </td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

关于代码片段，它可以工作，我只是使用了相同的图片，所以我使得偶数的颜色变浅了。