我的滑块无法在自动模式下工作

My slider no works automatic mode

本文关键字：模式 工作 我的      更新时间：2024-05-11

我创建了一个简单的滑块手风琴，这是我的代码，这是唯一的问题，它适用于自动模式，并且适用于

我的代码：

<style>
#ac_content
{
    width:900px;
    height:300px;
    margin:auto;
    background-color:#808080;
    overflow:hidden;
}
#ac_cols_float
{
    position:relative;
    float:left;
    line-width:70px;
    height:100%;
    background-color:#000000;
    margin-right:3px;
    cursor:hand;
    cursor:pointer;
}    
#ac_cols_float_infor
{
    position:relative;
    float:left;
    width4544:535px;
    height:100%;
    background-color:#ff0000;
}    
.rot-neg{
    margin-top:40px;
    margin-left:20px;
    font-size:20px;
    color:#FFFFFF;
    -moz-transform: rotate(90.0deg) translate(-40px,0px);  /* FF3.5+ */
    -moz-transform-origin: 0 100%;
    -o-transform: rotate(90.0deg) translate(-40px,0px);  /* Opera 10.5 */
    -o-transform-origin: 0 100%;
    -webkit-transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
    -webkit-transform-origin: 0 100%;
    transform: rotate(90.0deg) translate(-40px,0px);  /* Saf3.1+, Chrome */
    transform-origin: 0 100%;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0);  /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"; /* IE8 */
}    
#rote
{
    position:absolute;
}
</style>
<script>
var w="900";
var w_col="50";
var n_cols="5";
var margin=3*n_cols;
var result=w_col*n_cols+margin;
var final=w-result;

$(function(){    
    for (i=0;i<=5;i++)
    {       
        $(".ac_"+i+"").css("width",""+w_col);
    }
});
function acordeon(id)
{
    $(function(){
        $(".ac_"+id+"_inf").css("width",""+final);
        $(".ac_"+id+"_inf").show(2000).fadeIn(2000);
        for (i=0;i<5;i++)
        {           
            if (+id==i)
            {
            }
            else
            {
                $(".ac_"+i+"_inf").hide(1000);
            }
        }
    });
}
</script>
<script>
// AUTOMATIC MODE NO WORKS !!!
for (i=0;i<=5;i++)
{    
    setTimeout(function(){
        acordeon(i);
    },1000); 
}
</script>

<div id="ac_content">    
    <div id="ac_cols_float" class="ac_1" onclick="javascript:acordeon(1);"><div class="rot-neg">Web Design .....</div></div>
    <div id="ac_cols_float_infor" class="ac_1_inf" style="display:none;"></div>
    <div id="ac_cols_float" class="ac_2" onclick="javascript:acordeon(2);"></div>
    <div id="ac_cols_float_infor" class="ac_2_inf" style="display:none;"></div>
    <div id="ac_cols_float" class="ac_3" onclick="javascript:acordeon(3);"></div>
    <div id="ac_cols_float_infor" class="ac_3_inf" style="display:none;"></div>
    <div id="ac_cols_float" class="ac_4" onclick="javascript:acordeon(4);"></div>
    <div id="ac_cols_float_infor" class="ac_4_inf" style="display:none;"></div>

    <div id="ac_cols_float" class="ac_5" onclick="javascript:acordeon(5);"></div>
    <div id="ac_cols_float_infor" class="ac_5_inf" style="display:none;"></div>
</div>

问题是你可以看到//自动模式不起作用，另一个作品很好很完美，问候并感谢您的帮助！

似乎也有一些范围问题。我会把acordeon函数放在一个对象文字（namespace-ish）中，这样你就可以更好地控制它：

看看这把小提琴：http://jsfiddle.net/3mfJ2/

我改变的基本上是：

myfuncs = {
    acordeon: function(id)
        {
            $(function(){
                $(".ac_"+id+"_inf").css("width",""+final);
                $(".ac_"+id+"_inf").show(2000).fadeIn(2000);
                for (i=0;i<5;i++)
                {           
                    if (+id==i)
                    {
                    }
                    else
                    {
                        $(".ac_"+i+"_inf").hide(1000);
                    }
                }
            });
        }
}

将自动for循环更改为

var starting_slide = 5;
function setSlide(i) {
  acordeon(i);
   if (i > 1) {
      i--;   
      setTimeout( function(){setSlide(i)}, 1000);
    }
   /* 
    //if dont want it to stop
    else {
      setTimeout( function(){setSlide(starting_slide)}, 1000);
   } */
}
​setSlide(starting_slide);​

因为您当前的for循环不会等待并同时执行这5个超时。

相关文章：