2

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

我的代码：

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

问题在于您可以看到 // 自动模式无效！，其他作品很好，很完美，感谢您的帮助！

4

2 回答 2

1

将自动 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 个超时。

于 2012-07-31T08:38:18.807 回答
1

似乎也有一些范围问题。我会将 acordeon 函数放在对象文字（命名空间-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);
                    }
                }
            });
        }
}
于 2012-07-31T08:40:19.883 回答