Javascript 滑块的jquery不工作_Javascript_Jquery_Html_Css

Javascript 滑块的jquery不工作

javascript jquery html css

Javascript 滑块的jquery不工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经为滑块编写了以下脚本，但代码工作不正常。由于我已经初始化了k=5，它必须满足if条件并进入if部分。但它并没有相应地起作用。它都不会进入else部分。如果我初始化k=9 如果执行了部分，则仅执行上面的行。谁能告诉我出了什么问题。（slick.js是我为滑块下载的插件。） .demo{/*宽度：700px；高度：207px；*/显示：块；位置：相对；边框样式：实心；边框颜色：灰色；/*右边距：200px；*/最小宽度：240px；} .demo img{宽度：75px；高度：7

我已经为滑块编写了以下脚本，但代码工作不正常。
由于我已经初始化了

k=5

，它必须满足if条件并进入if部分。
但它并没有相应地起作用。
它都不会进入

else

部分。
如果我初始化

k=9

如果执行了部分，则仅执行上面的行。
谁能告诉我出了什么问题。
（slick.js是我为滑块下载的插件。）


.demo{/*宽度：700px；高度：207px；*/显示：块；位置：相对；边框样式：实心；边框颜色：灰色；/*右边距：200px；*/最小宽度：240px；}
.demo img{宽度：75px；高度：75px；}
var k=8，t=1；
$（文件）。准备好了吗(
函数（）{
$（'.demo'）.slick({
点：错，
无限：错，
draggable:true，//启用鼠标拖动
箭头：是的，
速度:200,，
幻灯片滚动：1
});
if（k<7）{
$（'.demo'）.slick({
响应：[
{
断点：1024，
设置：{
真的，
速度:200,，
幻灯片放映：k，
幻灯片滚动：1，
无限：错，
箭头：是的，
圆点：错
}
}
]
});
if（k<5）{
$（'.demo'）.slick({
响应：[
{
断点：600，
设置：{
真的，
速度:200,，
幻灯片放映：k，
幻灯片滚动：1，
无限：错，
箭头：是的，
圆点：错
}
}
]
});
if（k<3）{
$（'.demo'）.slick({
响应：[
{
断点：450，
设置：{
真的，
速度:200,，
幻灯片放映：k，
幻灯片滚动：1，
无限：错，
箭头：是的，
圆点：错
}
}
]
});
}
}
}
否则{
$（'.demo'）.slick({
响应：[
{
断点：1024，
设置：{
真的，
速度:200,，
幻灯片放映：7，
幻灯片滚动：1，
无限：错，
箭头：是的，
圆点：错
}
},
{
断点：600，
设置：{
真的，
速度:200,，
幻灯片放映：5，
幻灯片滚动：1，
无限：错，
箭头：是的，
圆点：错
}
},
{
断点：480，
设置：{
真的，
速度:200,，
幻灯片放映：3，
幻灯片滚动：1，
无限：错，
箭头：是的，
圆点：错
}
}
]
});
}
});

k在代码中是8…实际上，我只是通过将k设置为不同的值来检查代码是否工作正常..bt对于任何k它都不会执行if或else..我使用了$（文档）.ready…该函数将被执行，我想…如果条件正在执行，那么上面的5-6行也将被执行..如果其他部分没有执行，这个问题的解决方案是什么？我尝试了你的代码。它正在正常执行。我试着在chrome上使用断点。它工作正常。

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