Question

我试图让我网站上的图片在定时转换中从右向左滑动。到目前为止，我在某个时间进行了转换，但下一张图片并没有从右向左滑动。我添加了标题和更新的代码。我现在遇到的问题是图片覆盖标题并且不会相互滑动。

HTML
<style>
.Header {
            position: fixed;
            width: 100%;
            height:70px;
            background-color: black;
            text-align:right;
        }
        .socialmedia {
            position:fixed;
            right:100px;
            top:35px;
            transform:translate(0,-50%);
            display: flex; /* add this */
            align-items: center; /* add this */
        }
        .preorder button {
            background-color: white;
            border: 0;
            height: 35px;
            width: 110px;
            margin-left: 35px;
        }
.photoSection{
            direction:rtl
        }
        .mySlides {
            position: relative;

            right: -1000px;
            -webkit-animation: slide 1s forwards;

            animation: slide 1s forwards;

        }

        @-webkit-keyframes slide {
            100% { right: 0; }
        }

        @keyframes slide {
            100% { right: 0; }
        }
</style>
<div class="Header" id="myHeader">
    <a class = "headerLogo">
        <a href="file:///C:/Noah's%20stuff/Home.html" ><h1 style="color:white; font-family: Verdana; font-style: italic; font-size: x-large;
        text-align: center;">Some Title</h1></a>
        <style>
            a{text-decoration: none}
        </style>

    </a>
    <div class="socialmedia">
        <a class = "Facebook">
            <a href="https://www.facebook.com/" target="_blank"><img src = "https://images.seeklogo.net/2016/09/facebook-icon-preview-1.png" width="50px" height="50px"></a>
        </a>
        <a class = "Instagram">
            <a href="https://www.instagram.com/"><img src = "https://images.seeklogo.net/2016/06/Instagram-logo.png"  width="50px" height="50px"></a>
        </a>
        <a class = "Youtube">
            <a href="https://www.youtube.com/channel/" target="_blank"><img src = "https://images.seeklogo.net/2016/06/YouTube-icon.png" width="50px" height="50px"></a>
        </a>
        <a class = preorder>
            <button style = "background-color: white;">Pre-Order</button>

        </a>
    </div>
</div>
<div class="photoSection">
    <img src="board.png" style="width: 100%; height: 785px">
    <img src = "pic2.png" style = "width: 100%; height: 786px">
    <img src = "pic3.png" style = "width: 100%; height: 786px">
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>

JavaScript
<script>
    var myIndex = 0;
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}
        x[myIndex-1].style.display = "block";
        setTimeout(carousel, 2500);
    }
</script>

Answer 1

所以我在我的HTML上使用旋转木马。继承人你的回答：

HTML
<div class="slider">
<img id="1" src="board.png">
<img id="2" src = "pic2.png">
<img id="3" src = "pic3.png">
</div>

JavaScript
$(document).ready(function(){
slider();
});
function slider() {
$(".slider #1").show("fade",500);
$(".slider #1").delay(2000).hide("slide",{direction:'left'},500);

var sc=$(".slider img").size();
var count= 2;



setInterval(function(){

$(".slider #"+count).show("slide",{direction:'right'},500);

$(".slider #"+count).delay(2000).hide("slide",{direction:'left'},500);


if(count == sc)

 {count = 1;}

else

 {

count=count+1;

}


},3000);

}



CSS

.slider {width: 550px; height:270px;

overflow:hidden; margin:30px auto;

}

.slider img {

width: 550px; height:270px; display:none;

border="0"

}

继承人：https://jsfiddle.net/88u56y9h/1/

Answer 2

我修改了你的代码以实现从右到左的过渡你可以在这里找到它

HTML

<div class="photoSection">
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=board&h=786&w=786" class="mySlides" style="width: 100%; height: 785px">
    <img src = "https://placeholdit.imgix.net/~text?txtsize=33&txt=pic1&h=786&w=786"  class="mySlides" style = "width: 100%; height: 786px">
    <img src = "https://placeholdit.imgix.net/~text?txtsize=33&txt=pic2&h=786&w=786"  class="mySlides" style = "width: 100%; height: 786px">
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
    <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
</div>

CSS

.photoSection{
  direction:rtl
}
.mySlides {
  position: absolute;

    right: -1000px;
  -webkit-animation: slide 1s forwards;

    animation: slide 1s forwards;

}

@-webkit-keyframes slide {
    100% { right: 0; }
}

@keyframes slide {
    100% { right: 0; }
}

JS

  var myIndex = 0;


    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        console.log(x);
        for (i = 0; i < x.length; i++) {
            x[i].style.display = "none";
        }
        myIndex++;
        if (myIndex > x.length) {myIndex = 1}
        x[myIndex-1].style.display = "block";
        setTimeout(carousel, 9000);
    }

        carousel();

演示https://jsfiddle.net/wy4gLa3n/1/

我的网站上的图片在其定时过渡期间从右向左滑动

2 个答案: