2015-11-06 7 views
0

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

мой HTML:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<link rel="stylesheet" href="style.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="script.js"></script> 
<title>Untitled Document</title> 
</head> 
<body> 
<div id="container"> 
    <img id="prev" src="../Content Slider/images/rsz_back-button.png"> 
    <div id="slider"> 
     <h2>Meet our Dolls</h2> 
     <div class="slide"> 
      <h1>Echo</h1> 
      <img id="image" src="#"> 
     </div> 
    </div> 
    <img id="next" src="../Content Slider/images/rsz_forward-button.png"> 
</div> 
</body> 
</html> 

Мой jJQuery

'use strict'; 
$(document).ready(function(e) { 
    var images = [ 
     "file:///C|/Users/Kyle/Desktop/Web Projects/Content Slider/images/rsz_a0615655ad9ed49f75bf617e2df6a47c.jpg", 
     "file:///C|/Users/Kyle/Desktop/Web Projects/Content Slider/images/rsz_0000053222_20081110111439.jpg", 
     "file:///C|/Users/Kyle/Desktop/Web Projects/Content Slider/images/rsz_dollhouse-tv-show-2.jpg", 
     "file:///C|/Users/Kyle/Desktop/Web Projects/Content Slider/images/rsz_1alan-tudyk-transformers.jpg" 
    ]; 

    var currentImage = selectImage(); 
    var incrementer =-1; 

    function selectImage(){ 
     if(incrementer < 4){ 
      incrementer = incrementer +1; 
      return incrementer; 
     } else { 
      incrementer = -1; 
      selectImage(); 
     } 
    } 

    //get first slide 
    $('#image').attr('src',images[currentImage]); 
}); 

ответ

0

Вы должны определить функцию и переменную таким образом, что оба их объема существует при использовании:

var images = [ 
    "file:///C|/Users/Kyle/Desktop/Web Projects/Content Slider/images/rsz_a0615655ad9ed49f75bf617e2df6a47c.jpg", 
    "file:///C|/Users/Kyle/Desktop/Web Projects/Content Slider/images/rsz_0000053222_20081110111439.jpg", 
    "file:///C|/Users/Kyle/Desktop/Web Projects/Content Slider/images/rsz_dollhouse-tv-show-2.jpg", 
    "file:///C|/Users/Kyle/Desktop/Web Projects/Content Slider/images/rsz_1alan-tudyk-transformers.jpg" 
    ]; 

    function selectImage(){ 
     if(incrementer < 4){ 
      incrementer = incrementer +1; 
      return incrementer;} 
     else{ 
      incrementer = -1; 
      selectImage();}   
} 

var incrementer =-1; 
var currentImage = selectImage(); 

//get first slide 
$('#image').attr('src',images[currentImage]); 

Working Demo

+0

Спасибо, исходя из java Я не привык к тому, что код должен быть написан до того, как он будет выполнен. –

+0

@ Read_My_Feels991: интересно huh .... –

+0

Вид головной боли. действительно заставляет вас обратить внимание на порядок выполнения ваших кодов, хотя –

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