属性选择器不更改属性

Question

I'm just trying to make a very very simple image slider. 我只是想制作一个非常非常简单的图像滑块。 The finished product would have an img in the center of the page with an arrow img on either side. 成品的页面中央将带有一个img，而箭头的两边都将带有img。 When you click on them it should move to the next img or start over again if at the end and vice versa for the beginning. 当您单击它们时，它应该移至下一个img，或者如果从末尾开始，则应重新开始，反之亦然。 What I'm trying to do is hold the image src strings I want to slide through in an array. 我想做的是将要滑动的图像src字符串保存在数组中。 Then I've written a function to go through the array. 然后，我编写了一个遍历数组的函数。 I am at the very beginning and I wrote out a line to change the attribute of an image to the first image but when I run it the attribute doesn't change. 我是刚开始的时候，我写了一行代码将图像的属性更改为第一张图像，但是当我运行它时，该属性没有改变。

my html: 我的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>

My jJQuery 我的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]);
});

Answer 1

You need to define the function and variable in such a way that both of their scope exists when used: 您需要使用以下两种方式来定义函数和变量：

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 工作演示

属性选择器不更改属性

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-11-06 06:51:49

属性选择器不更改属性

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-11-06 06:51:49

解决方案1
0 已采纳 2015-11-06 06:51:49