使用jQuery Image Slider时遇到困难 [英] Difficulty with jQuery Image Slider

问题描述

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

I'm having trouble creating a jQuery image slider that can also contain other elements (ie: <div>, <a>, <span>) I've skimmed the internet for tutorials and downloaded several projects only to find that they are not easily editable. I've concluded that the best way will be to make one from scratch. Does anyone know of a good documentation source that can help walk me through the basics of creating basic jQuery image slider that is able to show all of the elements in my html?

以下是html / js：
Html：

Below is the 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：

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

推荐答案

我创建了一个准确的概念验证HTML幻灯片，有助于您入门。

I've created a barebones proof-of-concept HTML slideshow that should help get you started.

请参阅 jsFiddle 。

• 幻灯片包含上一个/下一个按钮和页码导航。


• 它可以包含任意数量的幻灯片，并且无限循环。


• 幻灯片可以包含任何内容，包括HTMLElements。


• 没有过渡，但它们可以添加 jQuery 或 CSS3

• The slideshow contains prev/next buttons and page number navigation.
• It can have any number of slides and will loop infinitely.
• The slides can contain anything including HTMLElements.
• There are no transitions but they can be added with jQuery or CSS3

这篇关于使用jQuery Image Slider时遇到困难的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！