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/上加载滑块容器区域内的图像。请注意，您可以通过添加从一个文档（在jquery api页面中显示）中加载内容带有id的额外元素。我不知道你的滑块如何处理额外的容器。

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

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~~

一页上有多个Jquery滑块

2 个答案: