圖像滑塊從右到左

Question

這是我的代碼，我有五個圖像，每個圖像都有自己的div，以及一個共同的類“ 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
      }
    }
  });
});

圖像滑塊從右到左

問題描述

1 個解決方案

解決方案1
0 已采納 2016-10-23 17:28:35

圖像滑塊從右到左

問題描述

1 個解決方案

解決方案1 0 已采納 2016-10-23 17:28:35

解決方案1
0 已采納 2016-10-23 17:28:35