javascript - 为什么我的 slider 没有响应?

标签 javascript jquery css slideshow

我试图让我的 slider 响应,但我做不到。所有的代码都在这里。我使用 Bootstrap 使 slider 响应。看起来我错过了什么。如果我以错误的方式进行操作,您可以将教程链接发送给我,我们将不胜感激。

HTML

<div class="container">       
    <div class="row">
        <div class="col-md-12 col-sm-12 col-xm-12 col-lg-12 img-responsive">
            <div id="slideShow"></div>                       
        </div>
    </div>          
</div> <!-- container -->

CSS

#slideShow {
}

#slideShow img{  
    position: absolute;   // if i delete then the slider becomes responsive the images don't work as a slide  //
    opacity: 0;
    left: 20%;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
}
#slideShow .current{
    opacity: 1;
}
body{
    padding-top: 50px;
}

JavaScript

window.onload = function(){    
    /* code for image slideshow  */
    var imgsrc = ["1.jpg", "2.jpg", "3.jpg", "4.jpg"];
    for(var i = 1; i<=imgsrc.length; i++)
    {
        var slideShow = document.getElementById("slideShow");
        var newImage = new Image();
        newImage.src = "image/" + imgsrc[i];
        slideShow.appendChild(newImage);   
    }
    slideShow.childNodes[0].setAttribute("class","current img-responsive");
    var x = 0;
    setInterval(function(){
        slideShow.childNodes[x%3].setAttribute("class","img-responsive");
        slideShow.childNodes[(x+1)%3].setAttribute("class","current img-responsive");
    x++;
    },3000);  
    /* end of code for image slideshow  */   
};  // end of window onload function

最佳答案

因为您只将 col-md-12 设置为一个类 - 您还应该添加 col-xs-**col-sm-* *。参见 https://getbootstrap.com/examples/grid/

关于javascript - 为什么我的 slider 没有响应?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36640666/

相关文章:

javascript - HTML - 使用 javascript 从文本字段保存数据

javascript - Ajax跨域php代理403错误

javascript - 我可以在没有服务器的情况下在本地使用 OpenID 吗?

jquery - JSON.stringify() - 转义问题

ios - ios 上的移动菜单滚动条不可见

Javascript从选择中删除元素

javascript - 何时在 jQuery AJAX 中执行 $.ajax 或 $.get 或 $.post

javascript - 使页眉和页脚文件包含在多个 html 页面中

javascript - 根据屏幕尺寸改变图像尺寸Javascript

html - 无法让 3 个 DIV 在容器内彼此相邻