Fatal编程技术网
  • javascript/
  • Javascript 尝试使我的照片幻灯片不断循环播放所有照片

Javascript 尝试使我的照片幻灯片不断循环播放所有照片

javascript html css

Javascript 尝试使我的照片幻灯片不断循环播放所有照片,javascript,html,css,slideshow,transition,Javascript,Html,Css,Slideshow,Transition,我的网站在标题下面的一个部分有照片幻灯片。当幻灯片放映到第三张照片时，它停止。我想知道如何将第三张照片转换回第一张照片，然后在所有照片中使用相同的动画继续循环？动画是从右侧滑入当前照片的下一张照片。我的代码如下 HTML <!DOCTYPE html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="w

我的网站在标题下面的一个部分有照片幻灯片。当幻灯片放映到第三张照片时，它停止。我想知道如何将第三张照片转换回第一张照片，然后在所有照片中使用相同的动画继续循环？动画是从右侧滑入当前照片的下一张照片。我的代码如下

HTML
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href= "Logo.png" type="img/SVG" style="width: 100%; height: 100%">
    <style>
        body {
            margin: 0;
        }

        .Header {
            position: fixed;
            z-index:1;
            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;
        }

        .footer {
            display: flex;
            align-items: center;
            width: 100%;
            height: 90px;
            background-color: black;
        }

        .photoSection {
            position: relative;
            background-color: black;
            overflow: hidden;
        }

        .mySlides~.mySlides {
            position: absolute;
            top: 0;
            left: 100%;
            transition: 0.8s;
        }
    </style>
</head>

<body>

<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 class="mySlides" src="http://coolwildlife.com/wp-content/uploads/galleries/post-3004/Fox%20Picture%20003.jpg" style="width:100%; height:785px;">
        <img class="mySlides" src="http://ichef-1.bbci.co.uk/news/976/media/images/83351000/jpg/_83351965_explorer273lincolnshirewoldssouthpicturebynicholassilkstone.jpg" style="width:100%; height: 785px">
        <img class="mySlides" src="https://c1.staticflickr.com/2/1520/24330829813_944c817720_b.jpg" style="width:100%; height: 785px">
    </div>

<div class="section1" style = "background-color: black; color: white; padding-top: 150px;" >
    <a class = "header1" style="padding-left: 200px; display:inline-block; width:85.2%">
        <img src = "FoldingIcon.PNG">
        <h1 style = "font-family: Verdana;font-size: x-large; text-align: start;">Some Title</h1>
        <p style = "margin-bottom: 200px; font-family: Verdana; color: gray;">
        </p>
        <img src="Backpack.PNG">
        <h2 style = "font-family: Verdana; font-size: x-large; text-align:start">Some Title</h2>
        <p style = "margin-bottom: 300px"></p>
    </a>
    <p style = "color: gray; background-color: black; color: white; padding-left: 50px; display:inline-block; width:85.2%">
        ____________________________________________________________________________________________________________________________________________________________</p>
</div>

<div class = "section2" style = "background-color: black; color: white; padding-bottom: 500px;">

</div>
<script>
    var myIndex = 0;
    carousel();

    function carousel() {
        var i;
        var x = document.getElementsByClassName("mySlides");
        myIndex++;
        if (myIndex > x.length) {
            myIndex = 1
            x[myIndex - 1].style.right;
        }
        else {
            x[myIndex - 1].style.left = "0";
        }

        // you may want to add transition-delay , z-index, ... to tune sliding effect
        setTimeout(carousel, 4000); // Change image every 2 seconds
    }
</script>

HTML
身体{
保证金：0；
}
.标题{
位置：固定；
z指数：1；
宽度：100%；
高度：70像素；
背景色：黑色；
文本对齐：右对齐；
}
.社会媒体{
位置：固定；
右：100px；
顶部：35px；
转换：翻译（0，-50%）；
显示器：flex；
/*加上这个*/
对齐项目：居中；
/*加上这个*/
}
.预订购按钮{
背景色：白色；
边界：0；
高度：35px；
宽度：110px；
左边距：35px；
}
.页脚{
显示器：flex；
对齐项目：居中；
宽度：100%；
高度：90px；
背景色：黑色；
}
1.照相检查{
位置：相对位置；
背景色：黑色；
溢出：隐藏；
}
.mySlides~.mySlides{
位置：绝对位置；
排名：0；
左：100%；
过渡：0.8s；
}
a{文本装饰：无}
预购
一些头衔




一些头衔




____________________________________________________________________________________________________________________________________________________________

var-myIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
myIndex++；
如果（myIndex>x.length）{
myIndex=1
x[myIndex-1].style.right；
}
否则{
x[myIndex-1].style.left=“0”；
}
//您可能需要添加过渡延迟、z索引等来调整滑动效果
setTimeout（carousel，4000）；//每2秒更改一次图像
}
  • 添加名为
    的css类。no_trans
    将禁用转换。此类将具有以下规则

    .no_trans{
  transition:none !important;
    -webkit-transition:none !important;
    -moz-transition:none !important;
    -ms-transition:none !important;
    -o-transition:none !important;
}
  • 当计数器大于禁用的图像数时，请删除转换类并反转图像的位置（这将很快）
  • 然后计数器以小于元素数的编号开始，因为您将其重置为0
  • 进程将重新启动

    。无传输{
过渡：无！重要；
-webkit转换：无！重要；
-moz转换：无！重要；
-ms过渡：无！重要；
-o-过渡：无！重要；
}
    HTML
身体{
保证金：0；
}
.标题{
位置：固定；
z指数：1；
宽度：100%；
高度：70像素；
背景色：黑色；
文本对齐：右对齐；
}
.社会媒体{
位置：固定；
右：100px；
顶部：35px；
转换：翻译（0，-50%）；
显示器：flex；
/*加上这个*/
对齐项目：居中；
/*加上这个*/
}
.预订购按钮{
背景色：白色；
边界：0；
高度：35px；
宽度：110px；
左边距：35px；
}
.页脚{
显示器：flex；
对齐项目：居中；
宽度：100%；
高度：90px；
背景色：黑色；
}
1.照相检查{
位置：相对位置；
背景色：黑色；
溢出：隐藏；
}
.mySlides~.mySlides{
位置：绝对位置；
排名：0；
左：100%；
过渡：0.8s；
}
a{
文本装饰：无
}
预购
一些头衔

    

    
一些头衔

    

    
____________________________________________________________________________________________________________________________________________________________
    
var-myIndex=0；
转盘（）；
函数旋转木马（）{
var i；
var x=document.getElementsByClassName（“mySlides”）；
myIndex++；
//console.log（myIndex）；
如果（myIndex>x.length）{
对于（变量y=0；y
    因此我看到它将最后一张照片切换回第一张照片，但是，它不会像其他照片那样显示动画。