Javascript 图像滑块没有发生任何事情_Javascript_Html_Css

Javascript 图像滑块没有发生任何事情

javascript html css

Javascript 图像滑块没有发生任何事情,javascript,html,css,Javascript,Html,Css,所以我计划在我的页面上放置一个滑块，但是代码不起作用，我已经在我的源代码上仔细检查了它，我的所有代码都是正确的，你能帮助我如何使我的滑块起作用吗？非常感谢，请尽快回复我的html <!DOCTYPE html> <html> <title>SLIDER</title> <link rel="stylesheet" type="text/css" href="draft3.css"> <!

所以我计划在我的页面上放置一个滑块，但是代码不起作用，我已经在我的源代码上仔细检查了它，我的所有代码都是正确的，你能帮助我如何使我的滑块起作用吗？非常感谢，请尽快回复

我的html

<!DOCTYPE html>
<html>
    <title>SLIDER</title>

    <link rel="stylesheet" type="text/css" href="draft3.css">
            <!--HEADER-->
<header>
    <div class="header">
</header>
<body>
            <!--NAVIGATION-->
<div class="nav">
        <ul>
            <li><a href="draft3.html">Home</a></li>
            <li><a href="draft4.html">Gallery</a></li>
            <li><a href="#">Feedback</a></li>
            <li><a href="Reg.html">Register</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
</div>
            <!--Gallery-->
<div id="slider">
    <figure>
        <img src="g1.jpg">
        <img src="g2.jpg">
        <img src="g3.jpg">
        <img src="g4.jpg">
    </figure>
</div>
</body>

测试和工作：（用示例图片替换您的图片）


滑块
*{
填充：0px；
边际：0px；
}
身体{
边际：0px；
填充：0px；
字体系列：无衬线；
}
.标题{
背景图片：url（head.jpg）；
高度：250px；
宽度：100%；
背景尺寸：封面；
背景位置：中心；
}
.导航{
宽度：100%；
高度：50px；
背景色：#1a0e34；
文本对齐：居中；
}
美国海军{
列表样式类型：无；
线高：50px；
}
李国荣先生{
显示：内联块；
右边距：40px；
}
李丽娜先生{
颜色：#f8992d；
背景色：透明；
边框：2个实心#f8992d；
边界半径：10px；
字体大小：20px；
填充：10px 20px；
文字装饰：无；
}
.nav ul li a:悬停{
颜色：#1a0e34；
背景色：#f8992d；
}
/*导航和收割台末端*/
#滑块{
溢出：隐藏；
}
#滑块图形{
位置：相对位置；
宽度：500%；
保证金：0；
左：0；
}
#滑块式img{
宽度：20%；
浮动：左；
}








var slideIndex=0；
放映幻灯片（）；
函数showSlides（）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
//var dots=document.getElementsByClassName（“dot”）；
对于（i=0；i幻灯片长度）{
slideIndex=1
}    
幻灯片[slideIndex-1].style.display=“block”；
setTimeout（showSlides，2000）；//每2秒更改一次图像
}

“如何使滑块工作”。。。什么滑块？只有一堆html图像标签根本没有动画？！他们都不活跃。你的问题不清楚。你问“我怎样才能使我的滑块工作”，但你没有告诉我们任何代码的“你的滑块”。。。只是css代码，这对这个问题是不必要的和一些图像标签捆绑在一个div？！？您是否使用过JS代码并可以与我们共享？@AKNair嗨，我在这里没有使用JS，我需要做的就是让这个滑块工作。谢谢，但您能解释一下您使用的功能吗？函数showSlides（）{var i；var slides=document.getElementsByCassName（“mySlides”）；//var dots=document.getElementsByCassName（“dot”）；for（i=0；islides.length）{slideIndex=1}slideIndex[slidex-1]。style.display=“block”；setTimeout（showSlides，2000）；//每2秒更改一次图像}此函数用于显示自动幻灯片。它将显示和隐藏滑块图像，即指定类名为“myslides”的文档中所有元素的集合。每隔2秒，它将隐藏上一个图像，然后使用css和js简单地显示下一个图像。完成后，再次启动起始索引。

*{
   Padding:0px;
   margin:0px;
}
body{
    margin:0px;
    padding:0px;
    font-family:Sans-serif;
}
.header{
    background-image:url(head.jpg);
    height: 250px;
    width:100%;
    background-size:cover;
    background-position:center;
}
.nav{
    width: 100%;
    height: 50px;
    background-color:#1a0e34;
    text-align:Center;
}
.nav ul{
    list-style-type:none;
    line-height:50px;
}
.nav ul li{
    display:inline-block;
    margin-right:40px;
}
.nav ul li a{
    color:#f8992d;
    background-color:transparent;
    border:2px solid #f8992d;
    border-radius: 10px;
    font-size:20px;
    padding: 10px 20px;
    text-decoration:none;
}
.nav ul li a:hover{
    color:#1a0e34;
    background-color:#f8992d;
}
/*End of Nav and Header*/
#slider{
    overflow: hidden;
}
#slider figure{
    position: relative;
    width: 500%;
    margin: 0;
    left:0;
}
#slider figure img{
    width: 20%;
    float: left;
}

<html>
<head>
    <title>SLIDER</title>

    <link rel="stylesheet" type="text/css" href="draft3.css">
            <!--HEADER-->
<header>
    <div class="header"></div>
</header>
<style>
*{
   Padding:0px;
   margin:0px;
}
body{
    margin:0px;
    padding:0px;
    font-family:Sans-serif;
}
.header{
    background-image:url(head.jpg);
    height: 250px;
    width:100%;
    background-size:cover;
    background-position:center;
}
.nav{
    width: 100%;
    height: 50px;
    background-color:#1a0e34;
    text-align:Center;
}
.nav ul{
    list-style-type:none;
    line-height:50px;
}
.nav ul li{
    display:inline-block;
    margin-right:40px;
}
.nav ul li a{
    color:#f8992d;
    background-color:transparent;
    border:2px solid #f8992d;
    border-radius: 10px;
    font-size:20px;
    padding: 10px 20px;
    text-decoration:none;
}
.nav ul li a:hover{
    color:#1a0e34;
    background-color:#f8992d;
}
/*End of Nav and Header*/
#slider{
    overflow: hidden;
}
#slider figure{
    position: relative;
    width: 500%;
    margin: 0;
    left:0;
}
#slider figure img{
    width: 20%;
    float: left;
}
</style>
</head>
<body>
            <!--NAVIGATION-->
<div class="nav">
        <ul>
            <li><a href="draft3.html">Home</a></li>
            <li><a href="draft4.html">Gallery</a></li>
            <li><a href="#">Feedback</a></li>
            <li><a href="Reg.html">Register</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact us</a></li>
        </ul>
</div>
            <!--Gallery-->
<div id="slider">
    <figure>
        <img class="mySlides" src="1.jpg"/>
        <img class="mySlides" src="2.jpg"/>
        <img class="mySlides" src="3.jpg"/>
        <img class="mySlides" src="4.jpg"/>
        <img class="mySlides" src="5.jpg"/>

    </figure>
</div>
<script>
var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  //var dots = document.getElementsByClassName("dot");
  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, 2000); // Change image every 2 seconds
}
</script>
</body>
</html>