gpt4 book ai didi

javascript - 属性选择器不改变属性

转载 作者:行者123 更新时间:2023-11-28 06:54:59 25 4
gpt4 key购买 nike

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

最佳答案

您需要以这样的方式定义函数和变量,以便在使用时它们的作用域都存在:

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

关于javascript - 属性选择器不改变属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33560947/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com