Question

我在网站http://thesunkissedgirls.com.au/

工作

并使用Easy Slider 1.7，但是当我在第一个滑块下方重新填充所有滑块加载然后启动时，我遇到了麻烦。

我正在使用这段代码：

<script type="text/javascript">
    $(document).ready(function(){   
        $("#slider").easySlider({
            auto: true, 
            continuous: true,
            numeric: true,
            speed: 500,
            pause: 5000,
            controlsShow: false
        });
    }); 
</script>

请帮我解决这个问题。

谢谢。

Answer 1

滑块初始化之前有一点延迟。您可以尝试隐藏所有图像，但在初始化滑块之前隐藏第一个图像：

像$('#slider li:not(:first)').hide();这样的东西应该可以解决问题。滑块初始化后，不要忘记再次显示它们。使用CSS和一个body类也可以这样做。

<强>更新这是我会尝试的：

向容器和第一个列表元素添加一个类：

<div id="slider" class="loading">
    <ul>
        <li class="first">
            <a href="http://thesunkissedgirls.com.au/models">
                <img src="http://thesunkissedgirls.com.au/wp-content/uploads/2011/06/slider_262.jpg" alt="slide1" />
            </a>
        </li>
        <li>
        […]
        </li>
    </ul>
</div>

如果包装器有一个.loading类，添加一些CSS来隐藏除第一个元素之外的所有元素：

#slider.loading li { display: none; }
#slider.loading li.first { display: block; }

最后在设置好所有内容后删除.loading课程：

<script type="text/javascript">
    $(document).ready(function(){   
        $("#slider")
            .easySlider({
                auto: true, 
                continuous: true,
                numeric: true,
                speed: 500,
                pause: 5000,
                controlsShow: false
            })
            .removeClass('loading');
    }); 
</script>

Answer 2

只需将easySlider脚本放在主体中的滑块div附近或更好。

<div id="slider">
        <ul>

<li><a href="?id=1"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>

<li><a href="?id=2"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>         
<li><a href="?id=3"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>

<li><a href="?id=4"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>

<li><a href="?id=5"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>         
</ul>

<!--  Slider ends  -->  
</div>


<script type="text/javascript">
    $(document).ready(function(){   
        $("#slider").easySlider({
            auto: true, 
            continuous: true,
            controlsShow: true,
            prevId: 'prevBtn',
            nextId: 'nextBtn',
            pause: 5000
        });
    }); 
</script>

Easy Slider 1.7有问题，请帮帮我

2 个答案: