我试图让我的 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/