滑块的jquery无法正常工作

时间:2014-05-01 19:05:08

标签: javascript jquery html css

我为滑块编写了以下脚本,但代码无法正常工作 由于我已初始化k = 5,因此必须满足if条件并进入if部分 但它不起作用。
它都没有进入else部分 如果我初始化k = 9 如果部分被执行,只有上面的行 任何人都可以告诉我们这个问题 (slick.js是我为我的滑块下载的一个插件。)

<!DOCTYPE html>
<html>
<head>
<style>
.demo{/*width:700px;height:207px;*/display:block;position:relative;border-style:solid;border-color:grey;/*margin-right:200px;*/min-width:240px;}
.demo img{width:75px;height:75px;}
</style>
<link rel="stylesheet" type="text/css" href="slick.css"/>

<script type="text/javascript" src="jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="slick.js"></script>
    <script type="text/javascript">
        var k = 8, t = 1;
        $(document).ready(
        function () {
            $('.demo').slick({
                dots: false,
                infinite: false,
                draggable: true, // Enables mouse drag
                arrows: true,
                speed: 200,
                slidesToScroll: 1
            });
            if (k < 7) {
                $('.demo').slick({
                    responsive: [
                    {
                        breakpoint: 1024,
                        settings: {
                            draggable: true,
                            speed: 200,
                            slidesToShow: k,
                            slidesToScroll: 1,
                            infinite: false,
                            arrows: true,
                            dots: false
                        }
                    }
                    ]
                });
                if (k < 5) {
                    $('.demo').slick({
                        responsive: [
                            {
                                breakpoint: 600,
                                settings: {
                                    draggable: true,
                                    speed: 200,
                                    slidesToShow: k,
                                    slidesToScroll: 1,
                                    infinite: false,
                                    arrows: true,
                                    dots: false
                                }
                            }
                        ]
                    });

                    if (k < 3) {
                        $('.demo').slick({
                            responsive: [
                                {
                                    breakpoint: 450,
                                    settings: {
                                        draggable: true,
                                        speed: 200,
                                        slidesToShow: k,
                                        slidesToScroll: 1,
                                        infinite: false,
                                        arrows: true,
                                        dots: false
                                    }
                                }
                            ]
                        });
                    }
                }
            }
            else {
                $('.demo').slick({
                    responsive: [
                        {
                            breakpoint: 1024,
                            settings: {
                                draggable: true,
                                speed: 200,
                                slidesToShow: 7,
                                slidesToScroll: 1,
                                infinite: false,
                                arrows: true,
                                dots: false
                            }
                        },
                    {
                        breakpoint: 600,
                        settings: {
                            draggable: true,
                            speed: 200,
                            slidesToShow: 5,
                            slidesToScroll: 1,
                            infinite: false,
                            arrows: true,
                            dots: false
                        }
                    },
                    {
                        breakpoint: 480,
                        settings: {
                            draggable: true,
                            speed: 200,
                            slidesToShow: 3,
                            slidesToScroll: 1,
                            infinite: false,
                            arrows: true,
                            dots: false
                        }
                    }
                    ]
                });
            }

        });

    </script>
</head>
<body>

    <div class="demo">
        <div><img class="ig" src="1.jpg"></div>
        <div><img class="ig" src="2.jpg"></div>
        <div><img class="ig" src="3.jpg"></div>
        <div><img class="ig" src="4.jpg"></div>
        <div><img class="ig" src="5.jpg"></div>
        <div><img class="ig" src="6.jpg"></div>
        <div><img class="ig" src="7.jpg"></div>
        <div><img class="ig" src="8.gif"></div>
    </div>
</body>
</html>

0 个答案:

没有答案