2014-11-29 2 views
0

Я пытаюсь сделать отзывчивый слайдер для мобильной версии. Сайт разработан с использованием угловых JS. Когда я пытаюсь интегрировать ползунки JQuery, общий сайт был распущен из-за файла Bootstrap CSS. Итак, в этой части я основал простой Javascript-код. И в этом, как сделать эти образы отзывчивыми. Ниже я добавляю код.Как добавить класс img-responseive в 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> 
+0

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

ответ

0

Предыдущие правильные ответы, но вы должны использовать $ для JQuery:

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

без JQuery:

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

Я не использую JQuery .. Его чистый Javascript .. –

+0

тогда просто: slideimages [0] .className + = "img-отзывчивый"; – ferflores

+0

Спасибо .. У меня встроен какой-то другой скрипт ... –

0

Чтобы добавить класс, просто использовать addClass:

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

Вы просто пытаетесь добавить класс? Я не совсем понимаю ваш вопрос.

+0

Да, я пытаюсь добавить класс. –

0

EDITED вам просто нужно сделать, это:

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

@ D.M. Vamsi измените ваш метод slideit() и попробуйте. –

+0

Не использовать .. Не работает. –

Смежные вопросы