Question

我试图让这个滑块在Javascript中自动播放，但我似乎无法让它工作，有谁知道我怎么能实现这个目标？每当我尝试某些东西时，它似乎打破了滑块。

jsfiddle版本：http://jsfiddle.net/BijanZand/7zebthjp/

以下是当前代码：

$(function() {
$("#t1").mouseover(function() {
    $("#t2").removeClass("current");
    $(this).addClass("current");
    $("#newTrend").fadeOut(function() {
        $("#newContent").fadeIn();
    });
});
$("#t2").mouseover(function() {
    $("#t1").removeClass("current");
    $(this).addClass("current");
    $("#newContent").fadeOut(function() {
        $("#newTrend").fadeIn();   
      });
  });
  });

Answer 1

只是一个快速解决方案：

在功能之间递归切换可以满足您的要求。但当然，您还有其他更好的选择来实现目标。

jQuery：

A();

function A(){
        $("#t2").removeClass("current");
        $("#t1").addClass("current");
        $("#newTrend").fadeOut(300, function() {
            $("#newContent").fadeIn();
            B();
        });
}

function B(){
        $("#t1").removeClass("current");
        $("#t2").addClass("current");
        $("#newContent").fadeOut(500, function() {
            $("#newTrend").fadeIn();
            A();
        });
}

jsFiddle

Answer 2

$(function() {
    var both = $('#t1, #t2'),
        run = function() {return window.setInterval(function() {
            both.not('.current').trigger('mouseover', 1);
        }, 1000);},
        play = run();
    both.mouseout(function() {play = run();});

    both.eq(0).mouseover(function(ev, data) {
        if (!data) window.clearInterval(play);
        both.eq(1).removeClass("current");
        $(this).addClass("current");
        $("#newTrend").fadeOut(function() {
            $("#newContent").fadeIn();
        });
    });
    both.eq(1).mouseover(function(ev, data) {
        if (!data) window.clearInterval(play);
        both.eq(0).removeClass("current");
        $(this).addClass("current");
        $("#newContent").fadeOut(function() {
            $("#newTrend").fadeIn();   
        });
    });
});

工作DEMO HERE。当您将鼠标悬停在选项卡上时，自动播放会停止，并在鼠标熄灭时再次启动。

Answer 3

您可以使用现有代码添加以下代码

var changeit = function(){
    $('#newTrendTap li:not(.current)').trigger('mouseover');
    setTimeout(changeit,3000);
}

changeit();

检查this fiddle

Answer 4

试试我的例子。

HTML代码

 <div id="tt" class="easyui-tabs" style="width:330px;height:270px;">
    <div title="Shirt1" style="padding:20px;">
      <img src="images/shirt1.gif">
      </div>
    <div title="Shirt2" style="padding:20px;">
      <img src="images/shirt2.gif">
     </div>
     <div title="Shirt3" style="padding:20px;">
     <img src="images/shirt3.gif">
    </div>
    <div title="Shirt4" style="padding:20px;">
     <img src="images/shirt4.gif">
    </div>
    <div title="Shirt5" style="padding:20px;">
      <img src="images/shirt5.gif">
    </div>
</div>

自动播放代码。

     var index = 0;
     var t = $('#tt');
     var tabs = t.tabs('tabs');
     setInterval(function(){
      t.tabs('select', tabs[index].panel('options').title);
       index++;
       if (index >= tabs.length){
       index = 0;
       }
       }, 3000);

如何使此滑块自动播放

4 个答案: