Как часть проекта в моей работе, я пытаюсь сделать очень простой слайдер изображений.My href onclick event не работает

Я создал функцию, которая должна делать слайд, но проблема в том, что когда я нажимаю на стрелки, это не меняет изображение на следующее/предыдущее.

Вот мой код:

HTML:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Simple Photo Slider</title> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 
    <link rel="stylesheet" type="text/css" href="css/main.css" /> 
</head> 
<body> 

    <div class="container"> 


     <!--Left Arrow--> 
     <div class="arrow"> 
      <a href="#" onclick="slide(-1)"> 
       <span class="left"></span> 
      </a> 
     </div> 

     <!--Image--> 
     <img src="images/img1.jpg" class="img" /> 

     <!--Right Arrow--> 
     <div class="arrow"> 
      <a href="#" onclick="slide(1)"> 
       <span class="right"></span> 
      </a> 
     </div> 



    </div> 
    <script src="js/index.js"></script>  
</body> 
</html>

JS:

var imageCount = 1; 
var total = 5; 
function slide(x) 
{ 
    var image = document.getElementsByClassName('img'); 
    imageCount += x; 
    if (imageCount > total || imageCount < 1) 
     imageCount = 1; 
    image.src = "images/img" + imageCount + ".jpg"; 
}

CSS:

.container { 
    width:700px; 
    height:600px; 
    margin: 20px auto; 
    position:relative; 
} 

.arrow { 
    display: inline-block; 
    vertical-align: middle; 
    position:absolute; 
    top:40%; 
    width:3em; 
} 



a { 
    display: inline-block; 
    border-radius: 50%; 
    text-align:center; 
} 

a:hover .left, a:hover .top, a:hover .bottom, a:hover .right{ 
    border: 0.3em solid #e74c3c; 
} 

a:hover .left:after, a:hover .top:after, a:hover .bottom:after, a:hover .right:after { 
    border-top: 0.3em solid #e74c3c; 
    border-right: 0.3em solid #e74c3c; 
} 

.left { 
    display: inline-block; 
    width: 3em; 
    height: 3em; 
    border: 0.3em solid #333; 
    border-radius: 50%; 
    /* margin-right: -3.5em; */ 
    /* margin-left: 0em; */ 
    /* margin: auto 0; */ 
} 

.left:after { 
    content: ''; 
    display: inline-block; 
    margin-top: 0.7em; 
    margin-left: 0.6em; 
    width: 1.4em; 
    height: 1.4em; 
    border-top: 0.3em solid #333; 
    border-right: 0.3em solid #333; 
    -moz-transform: rotate(-135deg); 
    -webkit-transform: rotate(-135deg); 
    transform: rotate(-135deg); 
} 

.right { 
    display: inline-block; 
    width: 3em; 
    height: 3em; 
    border: 0.3em solid #333; 
    border-radius: 50%; 
    margin-left: 40.1em; 
} 

.right:after { 
    content: ''; 
    display: inline-block; 
    margin-top: 0.7em; 
    margin-left: -0.6em; 
    width: 1.4em; 
    height: 1.4em; 
    border-top: 0.3em solid #333; 
    border-right: 0.3em solid #333; 
    -moz-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
} 


.img { 
    height:500px; 
    width:500px; 
    display:inline-block; 
    position:absolute; 
    left:14%; 

}

Как я могу заставить его работать? Что я сделал не так?

источник

2016-03-21 EVH671

'document.getElementsByClassName()' возвращает * коллекция * элементов. Поэтому 'image.src' не удастся, потому что коллекции элементов не выставляют свойство' src'. –

document.getElementsByClassName возвращает массив, так что вы должны написать:

image[0].src = "images/img" + imageCount + ".jpg";

CodePen

источник

2016-03-21 14:34:39 bugyt

Не должно '0' в' image [0] 'быть переменной, так как вам нужно будет получить доступ к другому изображению в массиве при каждом нажатии? – hungerstar

Если у вас есть только одно изображение с классом 'img' на вашей странице, оно всегда будет 0. – bugyt

Но он делает слайдер изображения, пример имеет один слайд, но я уверен, что в будущем будет больше. В противном случае, в чем смысл кнопок _prev_ и _next_, если есть только один слайд? – hungerstar

Изменить эту строку

var image = document.getElementsByClassName('img')[0];

Как document.getElementsByClassName('img') возвращает коллекцию, то нужно ссылаться на первый элемент в этой коллекции , который выполняется с помощью [0]. Эта коллекция похожа на массив, но есть некоторые отличия - see here if interested

В качестве альтернативы, как HTML-страница может иметь только один идентификатор, если вы установите id изображения в img вы можете просто сделать:

<img src="images/img1.jpg" id="img" />

Вы могли бы сделать

var image = document.getElementById('img');

источник

2016-03-21 14:36:30

Доступ к массиву должен выполняться с помощью переменной, ссылающейся на соответствующий индекс в массиве, а не на жестком закодированном «0», если это не так? – hungerstar

@hungerstar вы можете уточнить? Поскольку есть только один элемент с именем класса 'img', это всегда будет доступно с помощью' [0] '. Возможно, мне не хватает того, что вы имеете в виду, но, пожалуйста, объясните, как я хочу узнать. –

Глупый я, я забыл, что мы изменяли атрибут 'src' для этого слайдера, извините. У меня было это в голове, будет дополнительная надпись «img», как и большинство слайдеров. – hungerstar

My href onclick event не работает

HTML:

JS:

CSS:

ответ

CodePen

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