如何在JavaScript中添加img响应类 [英] How to add the img-responsive class in javascript
本文介绍了如何在JavaScript中添加img响应类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试为移动版本制作一个响应式滑块. 网站是使用有角JS开发的. 当我尝试集成JQuery滑块时，由于Bootstrap CSS文件，整个站点都在中断. 因此，在那部分中，我建立了一个简单的Javascript代码.以及如何使这些图像具有响应性. 我在下面添加代码.
I am trying to make a responsive slider for mobile version. Site was developed using angular JS. When I am trying to integrate the JQuery sliders, total site was distubing because of Bootstrap CSS file. So, in that part I founded a plain Javascript code. And in this how to make those images responsive. Below I am adding the code.
<head>
<script type="text/javascript">
var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "images/slide/1.jpg" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/slide/2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "images/slide/2.jpg"
</script>
</head>
<body>
<a href="javascript:slidelink()"><img src="firstcar.gif" id="slide" width=100 height=56 /></a>
<script type="text/javascript">
//variable that will increment through the images
var step = 0
var whichimage = 0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
whichimage = step
if (step<2)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
function slidelink(){
if (whichimage == 0)
window.location = "#"
else if (whichimage == 1)
window.location = "#"
else if (whichimage == 2)
window.location = "#"
}
slideit()
</script>
推荐答案
以前的答案是正确的，但您必须在jQuery中使用$:
Previous answers are correct but you have to use $ for jQuery:
$(slideimages[0]).addClass("img-responsive");
没有jQuery:
slideimages[0].className += "img-responsive";
这篇关于如何在JavaScript中添加img响应类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
