Question

这是我的代码，我有五个图像，每个图像都有自己的div，还有一个共同的类“图像”。我的问题是如何在GIF中实现效果。当您单击任何数字时，当前图像向左移动，新图像从右侧移动。

HTML

        <!DOCTYPE html>
        <html lang="en">[enter image description here][1]

            <body>

                    <div class="image">
                        <div class="image-one">
                            </div>
                        </div>
                    <div class="image">
                        <div class="image-two">
                            </div>
                        </div>
                    <div class="image">
                        <div class="image-three">
                            </div>
                        </div>
                    <div class="image">
                        <div class="image-four">
                            </div>
                        </div>
                    <div class="image">
                        <div class="image-five">
                            </div>
                        </div>
                    <div class="num-one num">
                        1
                    </div>
                    <div class="num-two num">
                        2
                    </div>
                    <div class="num-three num">
                        3
                    </div>
                    <div class="num-four num">
                        4
                    </div>
                    <div class="num-five num">
                        5
                    </div>

        </body>
        </html>

CSS

                body {
                    width: 100%;
                }

                .image {
                    position: fixed;
                    top: 210px;
                    left: 50%;
                    width: 700px;
                    height: 500px;
                    text-align: center;
                    margin-left: -350px;
                }

                .image-one {
                    position: fixed;
                    width: 700px;
                    height: 500px;
                    background-image: url(images/2322.jpg);
                    background-size: cover;
                    background-position: center center;
                }

                .image-two {
                    position: fixed;
                    left: 1500px;
                    width: 700px;
                    height: 500px;
                    background-image: url(images/4334f4.jpg);
                    background-size: cover;
                    background-position: center center;
                    box-shadow: 0 0px 10px rgba(0,0,0,0.25);
                    border-left: solid white;
                    border-width: 5px;
                }

                .image-three {
                    position: fixed;
                    left: 1500px;
                    width: 700px;
                    height: 500px;
                    background-image: url(images/54454c43.jpg);
                    background-size: cover;
                    background-position: center center;
                    box-shadow: 0 0px 10px rgba(0,0,0,0.25);
                    border-left: solid white;
                    border-width: 5px;
                }

                .image-four {
                    position: fixed;
                    left: 1500px;
                    width: 700px;
                    height: 500px;
                    background-image: url(images/23fd7hgg.jpg);
                    background-size: cover;
                    background-position: center center;
                    box-shadow: 0 0px 10px rgba(0,0,0,0.25);
                    border-left: solid white;
                    border-width: 5px;
                }

                .image-five {
                    position: fixed;
                    left: 1500px;
                    width: 700px;
                    height: 500px;
                    background-image: url(images/766gfs45.jpg);
                    background-size: cover;
                    background-position: center center;
                    box-shadow: 0 0px 10px rgba(0,0,0,0.25);
                    border-left: solid white;
                    border-width: 5px;
                }

                .num {
                    position: fixed;
                    left: 500px;
                    top: 750px;
                    width: 50px;
                    height: 50px;
                    text-align: center;
                    font-family: serif;
                    font-size: 25px;
                    line-height: 50px;
                    background-color: dodgerblue;
                }

                .num-two {
                    position: fixed;
                    left: 550px;
                }

                .num-three {
                    position: fixed;
                    left: 600px;
                }

                .num-four {
                    position: fixed;
                    left: 650px;
                }

                .num-five {
                    position: fixed;
                    left: 700px;
                }

https://i.stack.imgur.com/IuhxX.gif

Answer 1

我可以在这里找到一个真正的篦子滑块。 http://www.slidesjs.com/

基本设置与您的设置非常相似。

<div id="slides">
  <img src="image2">
  <img src="image3">
  <img src="image4">
  <img src="image5">
  <img src="image6">
</div>

下载在那里找到的js并添加脚本

<script>
$(function() {
  $('#slides').slidesjs({
    width: 940,
    height: 528,
    navigation: {
      effect: "fade"
    },
    pagination: {
      effect: "fade"
    },
    effect: {
      fade: {
        speed: 400
      }
    }
  });
});

图片滑块从右到左

1 个答案: