如何在javascript中添加img-responsive类答案

【问题标题】：How to add the img-responsive class in javascript如何在javascript中添加img-responsive类
【发布时间】：2015-01-27 22:40:28
【问题描述】：

我正在尝试为移动版本制作一个响应式滑块。网站是使用 Angular JS 开发的。当我尝试集成 JQuery 滑块时，由于 Bootstrap CSS 文件，整个站点都处于干扰状态。因此，在那部分中，我创建了一个纯 Javascript 代码。以及如何使这些图像具有响应性。下面我添加代码。

    <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>

【问题讨论】：

document.location = "https://www.google.nl/webhp?tab=ww&ei=d8p5VPSTLMfkUpf7gpgE&ved=0CAkQ1S4#safe=off&q=How+to+add+a+class+in+javascript"

标签： javascript jquery html css angularjs

【解决方案1】：

要添加一个类，只需使用 addClass:

slideimages[0].addClass("img-responsive");

你只是想添加一个类吗？我不太明白你的问题。

【讨论】：

【解决方案2】：

已编辑您只需要这样做：

function slideit(){
 //if browser does not support the image object, exit.
 if (!document.images)
  return
 document.getElementById('slide').src = slideimages[step].src
document.getElementById('slide').className = "img-responsive";
 whichimage = step
 if (step<2)
  step++
 else
  step=0
 //call function "slideit()" every 2.5 seconds
 setTimeout("slideit()",2500)
}

【讨论】：

@D.M. Vamsi 用这个改变你的 slideit() 方法并尝试。
没用..没有效果。

【解决方案3】：

以前的答案是正确的，但你必须使用 $ 来表示 jQuery：

$(slideimages[0]).addClass("img-responsive");

没有 jQuery：

slideimages[0].className += "img-responsive";

【讨论】：

那么只需：slideimages[0].className += "img-responsive";
但是滑动图像没有得到..不知道为什么..脚本很好..但是图像没有滑动..这是链接m.instylenewyork.com/index.html#。 . .你能帮我解决一下吗..谢谢
我不确定您要做什么，但您可以从修复 javascript 错误开始，如果您查看浏览器的控制台，有一些脚本错误并且未找到文件，第一个脚本给你一个错误，因为你在加载库之前使用 $ jQuery，尝试用 window.onload 事件或 jQuery 的等效事件包装它。