自动幻灯片播放不起作用
automatic slide show does not work
我想在一个html页面上有一个幻灯片,并在W3网站上找到一个html/javascript代码并复制它。但这行不通。我只看到了三张图片的列表。我一直在看这里给出的一些关于这个主题的答案,但我仍然找不到问题是什么。我认为代码是完整的,准备好了。所以我需要一些帮助。代码如下:
javascript//自动幻灯片-每3秒更换图像var slideIndex = 0;
showSlides ();function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 3000);
}
the html
<!-- Slide Show section showing 3 img every 3 sec-->
<div class="slideshow-container">
<div class="mySlides fade">
<img class="mySlides" src="../images/Icons/sa.png" alt="a"
style="width:100%">
</div>
<div class="mySlides fade">
<img class="mySlides" src="../images/images/b.jpg" alt="b"
style="width:100%" >
</div>
<div class="mySlides fade">
<img class="mySlides" src="../images/images
/c.jpg" alt="c"
style="width:100%">
</div>
你需要CSS样式是使它工作的重要组成部分。这里是完整代码的链接:
http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_auto<style>
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* 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 {
height: 13px;
width: 13px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active {
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) {
.text {font-size: 11px}
}
</style>
您的代码的唯一问题是您对<img>
和<div>
标签具有相同的类,从<img>
标签中删除class="mySlides"
,您的滑块将正常工作。
相关文章:
- 用于播放背景音乐的嵌入式flash播放器在IE浏览器中不起作用
- html视频javascript播放方法在移动Safari中不起作用
- 想制作一个基于URL的音频播放器,但Javascript不起作用
- 当我尝试在jsFiddle中暂停并播放时,我的代码可以工作,但它不起作用;我的html页面不起作用
- 无铬和自动播放不起作用
- 我正在尝试一个接一个地播放一个 mp3 文件(一个作为介绍),但它不起作用.我该怎么做
- Vimeo 播放器 JS API 在 iOS 中不起作用
- 通过脚本播放视频在安卓上不起作用
- JQuery 替换与 JW 播放器不起作用
- 视频播放事件中的 Angular 2 路绑定不起作用
- 集成指南中的“添加播放列表”按钮不起作用
- _.map() 在播放真实数据时不起作用
- 如果添加了播放列表,JWPLAYER 播放器不起作用
- 我的播放器播放列表删除功能不起作用
- 为什么我的播放按钮不起作用
- 使用 JW 播放器闪光灯进行静音切换的链接,回退到 HTML5 视频不起作用
- 通过PHP将动态mp3数据使用到嵌入式播放器中不起作用
- Mixcloud Player 自动播放在移动设备上不起作用
- 随机播放功能在单击按钮上不起作用
- 嵌入式播放器在远程浏览器中不起作用