Question

我只是想制作一个非常简单的图像滑块。成品将在页面中心有一个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]);
});

Answer 1

您需要定义函数和变量，以便在使用时它们的作用域都存在：

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 个答案: