Javascript 在不同文件中创建幻灯片_Javascript_Html_Css

Javascript 在不同文件中创建幻灯片

javascript html css

Javascript 在不同文件中创建幻灯片,javascript,html,css,Javascript,Html,Css,这是html代码 <!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" type="text/css" href="style2.css"> <script

这是html代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style2.css">
    <script src="learn1.js"</script>
</head>
<body>
   <div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="learnimg/1.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="learnimg/2.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="learnimg/3.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

<a class="prev" onclick="plusSlides(-1)">?</a>
<a class="next" onclick="plusSlides(1)">?</a>

</div>
<br>

<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>
</body>
</html>`

* {box-sizing:border-box} body {font-family: Verdana,sans-serif;margin:0}

/* Slideshow container */ .slideshow-container {   max-width: 1000px; 
position: relative;   margin: auto; }

/* Next & previous buttons */ .prev, .next {   cursor: pointer;  
position: absolute;   top: 0;   top: 50%;   width: auto;   padding:
16px;   margin-top: -22px;   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); }

/* Caption text */ .text {   color: #f2f2f2;   font-size: 15px;  
padding: 8px 12px;   position: absolute;   bottom: 8px;   width: 100%;
text-align: center; }

/* Number text (1/3 etc) */ .numbertext {   color: #f2f2f2;  
font-size: 12px;   padding: 8px 12px;   position: absolute;   top: 0;
}

/* The dots/bullets/indicators */ .dot {   cursor:pointer;   height:
13px;   width: 13px;   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} }

/* On smaller screens, decrease text size */ @media only screen and
(max-width: 300px) {   .slprev, .slnext,.text {font-size: 11px} }

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"; }

这是javascript代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style2.css">
    <script src="learn1.js"</script>
</head>
<body>
   <div class="slideshow-container">

<div class="mySlides fade">
  <div class="numbertext">1 / 3</div>
  <img src="learnimg/1.jpg" style="width:100%">
  <div class="text">Caption Text</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">2 / 3</div>
  <img src="learnimg/2.jpg" style="width:100%">
  <div class="text">Caption Two</div>
</div>

<div class="mySlides fade">
  <div class="numbertext">3 / 3</div>
  <img src="learnimg/3.jpg" style="width:100%">
  <div class="text">Caption Three</div>
</div>

<a class="prev" onclick="plusSlides(-1)">?</a>
<a class="next" onclick="plusSlides(1)">?</a>

</div>
<br>

<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>
</body>
</html>`

* {box-sizing:border-box} body {font-family: Verdana,sans-serif;margin:0}

/* Slideshow container */ .slideshow-container {   max-width: 1000px; 
position: relative;   margin: auto; }

/* Next & previous buttons */ .prev, .next {   cursor: pointer;  
position: absolute;   top: 0;   top: 50%;   width: auto;   padding:
16px;   margin-top: -22px;   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); }

/* Caption text */ .text {   color: #f2f2f2;   font-size: 15px;  
padding: 8px 12px;   position: absolute;   bottom: 8px;   width: 100%;
text-align: center; }

/* Number text (1/3 etc) */ .numbertext {   color: #f2f2f2;  
font-size: 12px;   padding: 8px 12px;   position: absolute;   top: 0;
}

/* The dots/bullets/indicators */ .dot {   cursor:pointer;   height:
13px;   width: 13px;   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} }

/* On smaller screens, decrease text size */ @media only screen and
(max-width: 300px) {   .slprev, .slnext,.text {font-size: 11px} }

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"; }

var slideIndex=1；放映幻灯片（幻灯片索引）；
函数plusSlides（n）{showSlides（slideIndex+=n）；}
函数currentSlide（n）{showSlides（slideIndex=n）；}
函数showSlides（n）{var i；var slides=
document.getElementsByClassName（“mySlides”）；var dots=
document.getElementsByClassName（“点”）；if（n>slides.length）
{slideIndex=1}如果（n<1）{slideIndex=slides.length}用于（i）=
0；i


所有这3个代码都在不同的文件中。这基本上是为了创建一个包含三个图像的简单幻灯片。但是，当我执行此操作时（都在不同的文件中），没有显示任何内容（浏览器中的白色屏幕）。但是当在一个html文件中执行时（所有内容都在一个文件中），就会有一个完美的幻灯片
我想不出这个问题。请帮我解决这个问题。
这似乎不对：
<script src="learn1.js"</script>

您发布的代码似乎工作正常
也许图像文件不在你说的地方
尝试打开并查找错误

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

{
框大小：边框框
}
身体{
字体系列：Verdana，无衬线；
保证金：0
}
/*幻灯片容器*/
.slideshow容器{
最大宽度：1000px；
位置：相对位置；
保证金：自动；
}
/*下一步和上一步按钮*/
.prev，
.下一个{
光标：指针；
位置：绝对位置；
排名：0；
最高：50%；
宽度：自动；
填充：16px；
利润上限：-22px；
颜色：白色；
字体大小：粗体；
字号：18px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，
.下一步：悬停{
背景色：rgba（0,0,0,0.8）；
}
/*标题文本*/
.文本{
颜色：#F2F2；
字体大小：15px；
填充：8px 12px；
位置：绝对位置；
底部：8px；
宽度：100%；
文本对齐：居中；
}
/*数字文本（1/3等）*/
.numbertext{
颜色：#F2F2；
字体大小：12px；
填充：8px 12px；
位置：绝对位置；
排名：0；
}
/*点/子弹/指示器*/
多特先生{
光标：指针；
高度：13px；
宽度：13px；
边际：0.2px；
背景色：#bbb；
边界半径：50%；
显示：内联块；
过渡：背景色0.6s；
}
.主动，
.dot:悬停{
背景色：#717171；
}
/*褪色动画*/
.褪色{
-webkit动画名称：淡入淡出；
-webkit动画持续时间：1.5s；
动画名称：淡入淡出；
动画持续时间：1.5s；
}
@-webkit关键帧淡入淡出{
从{
不透明度：.4
}
到{
不透明度：1
}
}
@关键帧淡入淡出{
从{
不透明度：.4
}
到{
不透明度：1
}
}
/*在较小的屏幕上，减小文本大小*/
@仅介质屏幕和（最大宽度：300px）{
斯莱普雷夫先生，
slnext先生，
.文本{
字号：11px
}
}

1/3
标题文本
2/3
标题二
3/3
标题三
❮
❯