Question

我有这个结构：

<button id="leftArrow" class="fbtnFirst">Left</button>
<button id="rightArrow" class="fbtnLast">Right</button>
<div id="itemsListBox">
    <ul>
        <li>
            <img id="img" src="http://pcforum.hu/site.pc/text/quicknews/14413/steam-big-picture-thumb-sharethumb.jpg" alt="" />
        </li>
        <li>
            <img src="http://upload.wikimedia.org/wikipedia/commons/1/1c/First_picture_sent_by_the_Mars_Curiosity_rover.jpg" alt="" />
        </li>
        <li>
            <img src="http://www.4planetssw.com/images/world_256.png" alt="" />
        </li>
        <li>
            <img src="https://si0.twimg.com/profile_images/3012695270/030358148a763890ab7da20d232a432f.jpeg" alt="" />
        </li>
        <li>
            <img src="https://si0.twimg.com/profile_images/3468143825/5d6ba2edd6f3d36098ed193d02b7a533.jpeg" alt="" />
        </li>
        <li>
            <img src="https://si0.twimg.com/profile_images/2951519370/fd6ab01e766f1a2b4a45ce0bfd8b1f1f.jpeg" alt="" />
        </li>
        <li>
            <img src="https://si0.twimg.com/profile_images/3663391377/2b982e104cb937134d8361152a45c201.jpeg" alt="" />
        </li>
        <li>
            <img src="http://pcforum.hu/site.pc/text/quicknews/14598/pendrive-cake-picture-thumb-sharethumb.jpg" alt="" />
        </li>
        <li>
            <img src="http://www.thefreshloaf.com/files/pictures/picture-38726-1370726725.jpg" alt="" />
        </li>
    </ul>
</div>

CSS：

#thumb-tray {
    position: absolute;
    z-index: 3;
    bottom: 0 !important;
    left: 0;
    height: 150px;
    width: 100%;
    overflow: hidden;
    text-align: center;
}
ul#thumb-list li {
    width:120px;
    display: inline-block;
}

我想，当我点击prev或next按钮时，为我选择的缩略图设置动画。像这样：

http://jsfiddle.net/z3PzC/

但是这段代码对我不起作用。

DEMO

Answer 1

试试这个 Css

#thumb-tray {
    position: absolute;
    top: 90px;
    width: 100%;
    padding: 0 10%;
    overflow: hidden;
}
ul#thumb-list {
    white-space: nowrap;
    overflow: hidden;
}
ul#thumb-list li{
    list-style-type: none;
    display: inline-block;
    width: 18%;
    margin: 1%;
}
ul#thumb-list li img {
    width: 100%;
}
img {
    position:relative;
}

Demo

点击ul li到左边通过jQuery

1 个答案: