图库图片滑块

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();
}

 $('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 }

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

 <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>

关于片段，它有效，我只是对所有内容使用相同的图片，所以我使偶数的色调更浅。