如何在javascript中添加img-responsive类

时间:2014-11-29 13:20:02

标签: javascript jquery html css angularjs

我正在尝试为移动版制作响应式滑块。 网站是使用角度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>

3 个答案:

答案 0 :(得分:0)

要添加类,只需使用addClass:

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

您是否只是想添加课程?我不太明白你的问题。

答案 1 :(得分:0)

已编辑您只需要执行此操作:

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

答案 2 :(得分:0)

以前的答案是正确的,但你必须使用$ for jQuery:

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

没有jQuery:

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