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>

<div id="second">
<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%;
}

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

我希望将它们都放在一个滑块中，这样我就可以在它们之间进行操作，除以分隔符。我得到了下面的代码并尝试操作，但无法使其工作除了图像从一个分频器“第一”。请帮忙！

HTML：

<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="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>
        </td>
        <td>
            <p onclick="right()">></p>
        </td>
    </tr>
</table>

css：

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

脚本：

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
}

JSFIDDLE：https://jsfiddle.net/1vq62s1d/

需要滑动并保持这种形状： enter image description here

它必须采用这种形式：2条平行水平线，每条线上有5幅图像。

我知道要问的太多了，但我现在已经工作了3天了，因为我是jquery的新手，所以无法到达任何地方。我很感激任何帮助！

Answer 1

首先，您不应该将表用于非表格内容。此外，您应该使用<和>代替＆lt;和＆gt;在HTML标签内。

我使用您的JSFIDDLE代码提出以下解决方案，但您只能在宽屏幕上获得两行图像。在狭窄的设备上，图像会包裹起来。

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first">
    <div onclick="left()" class="colMargin">&lt;</div>
    <div style="width:90%;float:left;max-width:560px;">
        <img id="image1" title="image1" src="http://placehold.it/350x150" />
        <img id="image2" title="image2" src="http://placehold.it/350x150" />
        <img id="image3" title="image3" src="http://placehold.it/350x150" />
        <img id="image4" title="image4" src="http://placehold.it/350x150" />
        <img id="image5" title="image5" src="http://placehold.it/350x150" />
        <img id="image6" title="image6" src="http://placehold.it/350x150" />
        <img id="image7" title="image7" src="http://placehold.it/350x150" />
        <img id="image8" title="image8" src="http://placehold.it/350x150" />
        <img id="image9" title="image9" src="http://placehold.it/350x150" />
        <img id="image10" title="image10" src="http://placehold.it/350x150" />
    </div>
    <div onclick="right()" class="colMargin">&gt;</div>
</div>

的Javascript

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

CSS

html {
    font-size: 50px;
}
img {
    margin-left: 10px;
}
#first {
    width: 100%;
    height: 220px;
}
#first img {
    height: 100px;
    width: 100px;
    float:left;
    margin-top: 5px;
}
.colMargin{
    width:5%;
    float:left;
    height:220px;
}

在此处查看JSFIDDLE：http://jsfiddle.net/sjx6qwt6/5/

我从您的JSFIDDLE中的Javascript中删除了最后两个重复的函数，并在$('img:last').before函数中将$('img:last').after更改为window.right。

注意：我在图片中添加了标题属性，以测试滚动是否正常工作。

自定义图像滑块

1 个答案: