一页上有多个 Jquery 滑块

Question

我正在使用 jquery 插件 slides 来为我的滑块提供动力。我希望我的页面上有 3 个滑块，但始终只显示一个。我有三个按钮可以在滑块之间循环。以下是我的按钮的 html 和 jquery：

HTML

<ul class="tabs">
            <li><a href="#tab1">Slider 1</a></li>
            <li><a href="#tab2">Slider 2</a></li>
            <li><a href="#tab3">Slider 3</a></li>

        </ul>

JQUERY

 $(".tab_content").hide();
                $("ul.tabs li:first").addClass("active").show(); 
                $(".tab_content:first").show(); 

                $("ul.tabs li").click(function() {

                    $("ul.tabs li").removeClass("active"); 
                    $(this).addClass("active"); 
                    $(".tab_content").slideUp(600);

                    var activeTab = $(this).find("a").attr("href"); 
                    $(activeTab).fadeIn(3500); 
                    return false;
                });

您可以在此处查看该页面的工作演示： http://vitaminjdesign.com/example/examples/Standard/index.html

如您所见，它有效，但效果不佳。单击时隐藏每个滑块的 jquery 可以工作，但我觉得有一个更好的解决方案。页面加载时，所有三个滑块都正在加载（两个隐藏）。这是一个好的做法吗？

有没有比我使用它的方式更好的方法来处理三个滑块？或者也许您有一些提示或技巧可以使幻灯片之间的转换更加清晰和更好？提前致谢。

Answer 1

加载隐藏在页面中的内容是完全可以的，只要它不是需要永远加载的内容。

但在这种情况下，我可能会考虑使用一个滑块，然后单击 http:// 加载滑块容器区域内的图像api.jquery.com/load/ 请注意，您可以通过添加带有 id 的额外元素来加载一个文档中的内容（如 jquery api 页面所示）。我想我不确定你的滑块如何处理额外的容器。

这样，我相信您应该能够使用一个滑块并加载该滑块内的所有图像，而不会混淆滑块，而不是加载一个滑块内的所有图像并隐藏这些图像..这应该会混淆大多数滑块。

Answer 2

使用 Jquery 的 scrollTo 导致使用以下 jquery 的解决方案：

$('#hero-slider ul a.pita').click(function () {

                $('#hero-slider ul a').removeClass('activeSlide');
                $(this).addClass('activeSlide');    
                $('.maskss').scrollTo($(this).attr('rel'), 500);
                return false;       

            });

实时查看：http://vitaminjdesign.com/example/examples/Standard/index.html