Question

我正试图从头开发图像滑块。我是jquery的新手，我已经在互联网上看到了滑块的其他例子，但是我无法在滑块中找到我想要的东西。

这是我所做的布局的截图。我不需要完整的代码，但我想知道要使用的算法和内容。

这是我到目前为止所尝试过的，因为我无法通过它，我对jquery / javascript很陌生

＆＃13;

.slider {
        background: red;
        display: flex;
}

.slider-image {
        position: absolute;
}

.slider-image img {
        width: 400px;
        height: 200px;
}

＆＃13;

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <link rel="stylesheet" href="css/normalize.css">
                <link rel="stylesheet" href="css/slider.css">
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                <script type="text/javascript">
                        var currentImg = 3;
                        var imgHeight  = 200;
                        var imgWidth = 400;
                        var maxImgShow = 5;
                        
                        $(document).ready(function() {
                                var slider-image = $(".slider-image");

                        });
                </script>
                <title>Image slider</title>
        </head>
        <body>
                <div class="slider">
                        <div class="slider-image"><img src="http://placehold.it/400x200"></div>
                        <div class="slider-image"><img src="http://placehold.it/400x200"></div>
                        <div class="slider-image"><img src="http://placehold.it/400x200"></div>
                        <div class="slider-image"><img src="http://placehold.it/400x200"></div>
                        <div class="slider-image"><img src="http://placehold.it/400x200"></div>
                </div>
        </body>
</html>

＆＃13;

Answer 1

是自动播放还是用户点击移动？

如果您想要自动移动，则需要搜索“轮播幻灯片”

Here是一个样本

您需要更改

 sides:6,

到

sides:10,

在上面示例的body部分的代码中，因为您需要显示5个图像

图片滑块包含5张图片，中心图片比其他图片大

1 个答案: