Question

我使用i滑块（我制作自己）并且它正在工作..但是通过点击每个标签的数量

我想让它每隔5秒或其他任何时间自动浏览每个图像。

这是html和javascript代码：

html：

<div class="slide2">
    <div id="tabs">
        <div id="content">
            <div id="slide-6" class="tab-slide" style="display: block">
        <div class="desc">
            <div>Slide 6 - tab1</div>
        </div>
            </div>

            <div id="slide-7" class="tab-slide">
        <div class="desc" style="width:320px;padding-top:236px;height:120px;">
            <h1>Slide 7 - tab2</h1>
        </div>
            </div>

            <div id="slide-8" class="tab-slide">
        <div class="desc" style="width:320px;">
            <h1>Slide 8 - tab3</h1>
        </div>
            </div>

            <div id="slide-9" class="tab-slide">
        <div class="desc" style="width:320px;">
            <h1>Slide 9 - tab4</h1>
        </div>
            </div>
        </div>
<ul id="nav2">
    <li><a class="current" id="tab-6" href="#tab">Tab1</a></li>
    <li><a id="tab-7" href="#tab">Tab2</a></li>
    <li><a id="tab-8" href="#tab">Tab3</a></li>
    <li><a id="tab-9" href="#tab">Tab4</a></li>
</ul>
    </div>

javascript：

        $(function(){

        $('#tabs #nav2 li a').click(function(){

            var currentNum = $(this).attr('id').slice(-1);
            $('#tabs #nav2 li a').removeClass('current');
            $(this).addClass('current');

            $('#tabs #content .tab-slide').hide(1);
            $('#tabs #content #slide-'+currentNum+'.tab-slide').show(300);
        });

        $('#tabsSlide #nav2 li a').click(function(){

            var currentNum = $(this).attr('id').slice(-1);
            $('#tabsSlide #nav2 li a').removeClass('current');
            $(this).addClass('current');

            $('#tabsSlide #content .tab-slide').slideUp(300);
            $('#tabsSlide #content #slide-'+currentNum+'.tab-slide').slideDown(300);
        });

    });

CSS：

    .slide2 {
    margin:0 auto;
    padding:0;
    width:574px;
}
#tabs {
    width:574px;
    margin:0 auto;
    padding:0;
}
#tabs #nav2 {
    float: right;
    margin:0;
    padding:0px;
    list-style-type:none;
    width:574px;
}
#tabs #nav2 li{
    display:inline;
}
#tabs #nav2 li a {
    display:block;
    width:25%;
    text-align:center;
    float:right;
    padding:0;
    margin:0;
    height:55px;
    line-height:55px;
    color:#0096d6;
    text-decoration:none;
    font-family:Tahoma;
    font-size:12px;
    font-weight:bold;
    background-image: url('images/slide/a.png');
}
#tabs #nav2 li a:hover {
    background:#dddede;
}
#tabs #nav2 li a.current {
    background:#dddede;
    color:#666666;
}
#tabs #content {
    padding:0px;
    clear: both;
    text-align: right;
    min-height: 366px;
}
#tabs #content ul {
    list-style-type:none;
    color:#c1c0c0;
}
.tab-list {
    width:115px;
    float:right;
    line-height:200%;
    margin:0px 10px 0px 0px;
    padding:0px 0px 0px 0px;
    color:#c1c0c0;
}
.tab-list a {
    color:#c1c0c0;
}
.tab-list a:hover {
    color:#0198d8;
}
#tabs #content .tab-slide { display: none; }
#tabs #content .tab-slide p {
    margin:0;
    padding: 0;
    font: 11px tahoma;
    line-height: 150%;
}
.slide2 #slide-6 {
    background-image: url('images/slide/1.jpg');
    width:574px;
    height:366px;
}
.slide2 #slide-7 {
    background-image: url('images/slide/2.jpg');
    width:574px;
    height:366px;
}
.slide2 #slide-8 {
    background-image: url('images/slide/3.jpg');
    width:574px;
    height:366px;
}
.slide2 #slide-9 {
    background-image: url('images/slide/4.jpg');
    width:574px;
    height:366px;
}

谢谢！

我不需要暂停鼠标..

我只想让内容自动移动，这就是全部！

Answer 1

这应该为你循环（每5秒钟）...没有你所有的代码，并在其中添加钩子，这似乎是最简单的方法。除非您添加该功能，否则当鼠标悬停时，它不会暂停循环计时器。

var to;
function cycle() {
    $('#tabsSlide #nav2 li a').click();
    to = setTimeout(cycle,5000);
}
cycle();

注意，要添加暂停效果，您需要通过清除鼠标悬停时的超时并在mouseout上恢复来停止/重新启动超时调用。如果你想恢复计时器而不是重新启动它，你也需要做一些数学计算。

有没有办法让这个幻灯片自动移动？

1 个答案: