仅更改类的jQuery幻灯片[关闭]答案

【问题标题】：jQuery slideshow that only changes class [closed]仅更改类的jQuery幻灯片[关闭]
【发布时间】：2014-06-05 15:26:28
【问题描述】：

我有一个非常特别的幻灯片，其中 5 张幻灯片是自定义响应式 HTML 代码。

我正在寻找一个 jQuery 幻灯片，它仅只是将某些类放到活动幻灯片中。没有任何过渡或位置变化。我的 HTML 代码如下所示：

<div id="slider">
    <div class="active">first slide</div>
    <div>second slide</div>
    <div>third slide</div>
</div>

幻灯片应该有按钮prev、next和代表每张幻灯片的按钮。单击此类按钮后，active 类将跳转到请求的幻灯片。它还应该具有自动播放功能。换句话说，控件就像任何其他普通幻灯片一样。

我可以使用现有的幻灯片解决方案吗？

谢谢。

【问题讨论】：

您想创建自己的幻灯片还是使用 jQuery 滑块插件？
你的意思是jqueryui.com/slider？不，我想要幻灯片。我的问题是针对现有解决方案？
不，我的意思是 nivo 滑块 demo.dev7studios.com/nivo-slider
不，Nivo Slider 改变了 X/Y 位置，我根本不想要那个。我正在考虑自己编写代码。也许没有这么简单的幻灯片。
查看我发布的这个答案（被选为最佳答案）stackoverflow.com/questions/22293523/…

标签： jquery html class slider slideshow

【解决方案1】：

JQUERY

$(function(){
    $('#slider div:first-child').addClass('active');

    $('.arrow').on('click', function(){
        updateClass( $(this).attr('data-dir') );
    });

});

function updateClass ( direction )
{
    var current = $('#slider .active');

    if ( direction == 'left' && current.index() > 0 )
    {
        current.removeClass('active');
        current.prev().addClass('active');
    }
    else if ( direction == 'right' && current.index() < $('#slider div:last-child').index() )
    {
        current.removeClass('active');
        current.next().addClass('active');
    }
}

HTML

<a href="#" class="arrow" data-dir="left">left</a>
<div id="slider">
    <div>slide1</div>
    <div>slide2</div>
    <div>slide3</div>
</div>
<a href="#" class="arrow" data-dir="right">right</a>

【讨论】：

谢谢，这可以部分做到...

【解决方案2】：

你可以试试 Jssor 滑块http://www.jssor.com/development/index.html

它应该适用于当前的 jquery 版本

jQuery

<!-- it works the same with all jquery version from 1.x to 2.x -->
<script src="jquery.min.js"></script>
<script src="jssor.slider.mini.js"></script>
<script>
    jQuery(document).ready(function ($) {
        var options = { $AutoPlay: true };
        var jssor_slider1 = new $JssorSlider$('slider1_container', options);
    });
</script>

HTML

<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 
600px; height: 300px;">
    <!-- Slides Container -->
    <div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 600px; height: 300px;">
        <div><img u="image" src="image1.jpg" /></div>
        <div><img u="image" src="image2.jpg" /></div>
    </div>
</div>

【讨论】：

他不想要幻灯片