2016-02-12 3 views
0

Я действительно новичок в JavaScript и стараюсь выяснить базовый слайд с картинками, встроенными в массив. Как вы нажимаете дальше и дальше, чтобы получать новые изображения.Ввод изображений в простой параллельный массив со следующими предыдущими кнопками

Как я могу это сделать? Вот что я до сих пор.

<html> 
<body> 

<script> 

imgArray = new Array(
“image”, 
“image” 
“image”); 

x=1 
y=2; 

function move{ 
y = y+xflip; 
if (y>x) 
{y = 1;} 
if (y==0) 
{y = x; 
document.images[2].src = img[y-1];} 

</script> 

<input type=“button” value=“Prev” name=“buttonp” onclick=“slide(-1)”> 
<input type=“button” value=“Next” name=buttonb” onclock=“slide(1)”> 

<img src=“image1”> 

</body> 
</html> 

Пожалуйста, помогите. Благодарю.

+0

У вас есть ошибка в вашем скрипте, например 'function move()', и перед использованием новой переменной вы используете 'var'. –

+0

также событие onclick вызывает функцию slide(), но в js функция называется move (и, как сказал Виктор, вам нужно иметь() после имени функции в js. Также нет функции в js, чтобы принять переданные аргументы (1 или -1) в событии onclick. – gavgrif

ответ

0

Мне нравится подход jquery. Вы можете попробовать что-то вроде этого. Вам нужно будет добавить немного дополнительной логики для нажатия на предыдущий с первого раза и т. Д.

<button id=“buttonprev” type="button">Previous</button> 
<button id=buttonforward”>Next</button> 

<img id="preview" src="#" alt="your image" /> 

<script> 
    var imgArray = ['image1.png', 'image2.png', 'image3.png']; 
    var imgCount = 0; 

    $("#buttonforward").on('click', function(event) { 
     imgCount += 1; 
     $('#preview').attr('src', imgArray[imgCount]); 
    }); 

    $("#buttonprev").on('click', function(event) { 
     imgCount -= 1; 
     $('#preview').attr('src', imgArray[imgCount]); 
    }); 
</script> 
Смежные вопросы