Javascript CSS幻灯片在单击之前不显示图像_Javascript_Html_Css_Slideshow

Javascript CSS幻灯片在单击之前不显示图像

javascript html css

Javascript CSS幻灯片在单击之前不显示图像,javascript,html,css,slideshow,Javascript,Html,Css,Slideshow,所以我一直在尝试实现W3Schools网站上的幻灯片放映。（）我已经让它工作，但第一个图像没有加载。仅当我单击左/右按钮或单选按钮时，图像才会显示我将附上我的意思的屏幕截图。我想这可能是显示器的问题：没有；当然，改变这一点意味着你可以同时加载所有的图像编辑：代码： var slideIndex=1；放映幻灯片（幻灯片索引）；函数加滑块（n）{ 放映幻灯片（幻灯片索引+=n）； } 功能当前幻灯片（n）{ 放映幻灯片（幻灯片索引=n）； } 功能演示幻灯片（n）{ var i；

所以我一直在尝试实现W3Schools网站上的幻灯片放映。（）

我已经让它工作，但第一个图像没有加载。仅当我单击左/右按钮或单选按钮时，图像才会显示

我将附上我的意思的屏幕截图。

我想这可能是显示器的问题：没有；当然，改变这一点意味着你可以同时加载所有的图像

编辑：代码：

var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>幻灯片长度）{
slideIndex=1
}
if（n<1）{
slideIndex=slides.length
}
对于（i=0；i


.dealshead部分{
左侧填充：200px；
浮动：对；
位置：相对位置；
填充顶部：0；
边际上限：0；
}
* {
框大小：边框框
}
/*幻灯片容器*/
.slideshow容器{
最大高度：300px；
最大宽度：300px；
边际上限：0；
}
迈斯利德斯先生{
显示：无；
}
/*下一步和上一步按钮*/
.prev，
.下一个{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
边缘顶部：-45px；
填充：16px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，
.下一步：悬停{
背景色：rgba（0,0,0,0.8）；
}
/*点/子弹/指示器*/
多特先生{
光标：指针；
高度：15px；
宽度：15px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
忙碌的
.dot:悬停{
背景色：#717171；
}
/*褪色动画*/
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
从{
不透明度：.4
}
到{
不透明度：1
}
}
@关键帧淡入淡出{
从{
不透明度：.4
}
到{
不透明度：1
}
}

❮
❯
我有一个示例代码（引导滑块）`
-**在此处输入代码**
`
引导示例
旋转木马示例



我有一个示例代码（引导滑块）`
-**在此处输入代码**
`
引导示例
旋转木马示例



代码按预期工作，放入一个html文件，此文件按预期工作
<style>
.dealshead section {
    padding-left: 200px;
    float: right;
    position: relative;
    padding-top: 0;
    margin-top: 0;
}

* {
    box-sizing: border-box
}


/* Slideshow container */

.slideshow-container {
    max-height: 300px;
    max-width: 300px;
    margin-top: 0;
}

.mySlides {
    display: none;
}


/* Next & previous buttons */

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -45px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


/* The dots/bullets/indicators */

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #717171;
}


/* Fading animation */

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}
</style>


<section>
<img class="mySlides fade" src="images\whiteonblack.jpg" style="width:100%">
<img class="mySlides fade" src="images\blackonwhite.jpg" style="width:100%">
<img class="mySlides fade" src="images\yellowonred.jpg" style="width:100%">
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
<div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
</div>
</section>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
}
</script>


.发牌组{
左侧填充：200px；
浮动：对；
位置：相对位置；
填充顶部：0；
边际上限：0；
}
* {
框大小：边框框
}
/*幻灯片容器*/
.slideshow容器{
最大高度：300px；
最大宽度：300px；
边际上限：0；
}
迈斯利德斯先生{
显示：无；
}
/*下一步和上一步按钮*/
.prev，
.下一个{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
边缘顶部：-45px；
填充：16px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，
.下一步：悬停{
背景色：rgba（0,0,0,0.8）；
}
/*点/子弹/指示器*/
多特先生{
光标：指针；
高度：15px；
宽度：15px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
忙碌的
.dot:悬停{
背景色：#717171；
}
/*褪色动画*/
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
从{
不透明度：.4
}
到{
不透明度：1
}
}
@关键帧淡入淡出{
从{
不透明度：.4
}
到{
不透明度：1
}
}
❮
❯
var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“dot”）；
如果（n>幻灯片长度）{
slideIndex=1
}
if（n<1）{
slideIndex=slides.length
}
对于（i=0；i
该代码的工作原理如下
<style>
.dealshead section {
    padding-left: 200px;
    float: right;
    position: relative;
    padding-top: 0;
    margin-top: 0;
}

* {
    box-sizing: border-box
}


/* Slideshow container */

.slideshow-container {
    max-height: 300px;
    max-width: 300px;
    margin-top: 0;
}

.mySlides {
    display: none;
}


/* Next & previous buttons */

.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -45px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
}


/* Position the "next button" to the right */

.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}


/* On hover, add a black background color with a little bit see-through */

.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}


/* The dots/bullets/indicators */

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #717171;
}


/* Fading animation */

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
}
</style>


<section>
<img class="mySlides fade" src="images\whiteonblack.jpg" style="width:100%">
<img class="mySlides fade" src="images\blackonwhite.jpg" style="width:100%">
<img class="mySlides fade" src="images\yellowonred.jpg" style="width:100%">
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
<div style="text-align:center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
</div>
</section>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
    showSlides(slideIndex += n);
}

function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = slides.length
    }
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";
    }
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
}
</script>