从右到左的图像滑块

Question

这是我的代码，我有五张图片，每张都有自己的 div，还有一张普通的 class "image"。我的问题是如何实现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
      }
    }
  });
});

从右到左的图像滑块

Image Slider from right to left

html

javascript

css

jquery

gif