Question

我在创建jQuery图片滑块时遇到问题，该滑块也可以包含其他元素（例如：<div>，<a>，<span>）我已经浏览了互联网对于教程和下载了几个项目只是为了发现它们不容易编辑。我已经得出结论，最好的方法是从头开始制作一个。有没有人知道一个好的文档源，可以帮助我完成创建基本的jQuery图像滑块的基础知识，该滑块能够显示我的html中的所有元素？

下面是html / js： HTML：

<div id="container">
<div id="pbody">
    <div id="slides">
        <div title="Slider 1" style="background-image: url(images/TCM_slider1_WW_v1.jpg); display:block;" class="current billboard">
            <p class="big">Slider 1</p>
            <a href="#" class="black_button">
                <span>Learn more</span>
            </a>
        </div>
        <div title="Slider 2" style="background-image: url(images/TCM_slider2_WW_v1.jpg); display:block;" class="billboard">
            <p class="big">Slider 2</p>
            <a href="#" class="black_button">
                <span>Learn more</span>
            </a>
        </div>
    </div>
    <ol id="controls">
        <li class="current">1</li>
        <li>2</li>
        <li>3</li>
    </ol>
    <a href="javascript:;" id="prev">Prev</a>
    <a href="javascript:;" id="next">Next</a>
</div>

使用Javascript：

var cycle = window.setInterval(next, 4000);
function prev() {
$('#slides .billboard .current')
    .removeClass('billboard current')
    .prev().add('#slides :last')
    .first().addClass('billboard current')
;
$('#controls .current')
    .removeClass('current')
    .prev().add('#controls :last')
    .first().addClass('current')
;
}

function next() {
$('#slides .billboard .current')
    .removeClass('billboard current')
    .next().add('#slides :first')
    .last().addClass('billboard current')
;
$('#controls .current')
    .removeClass('current')
    .next().add('#controls :first')
    .last().addClass('current')
;
}

$('#prev').on('click', prev);
$('#next').on('click', next);
$('#controls li').on('click', function() {
$self = $(this)
    .addClass('current')
    .siblings('.current').removeClass('current')
    .end()
;
$('#slides  .billboard .current')
    .removeClass('billboard current')
    .siblings(':nth-child(' + ($self.index() + 1) + ')').addClass('billboard current');
});

Answer 1

我已经创建了一个准确的概念验证HTML幻灯片，可以帮助您入门。

请参阅jsFiddle。

幻灯片显示包含上一个/下一个按钮和页码导航。
它可以有任意数量的幻灯片，并且会无限循环。
幻灯片可以包含任何内容，包括HTMLElements。
没有转场，但可以使用jQuery或CSS3

使用jQuery Image Slider时遇到困难

1 个答案: