Javascript 属性选择器不更改属性
我只是想制作一个非常简单的图像滑块。成品在页面中央有一个img,两侧有一个箭头img。当你点击它们时,它应该移动到下一个img,如果在末尾,它应该重新开始,反之亦然。 我要做的是在数组中保存要滑动的图像src字符串。然后我编写了一个函数来遍历数组。我刚开始写了一行代码,将一个图像的属性更改为第一个图像,但当我运行它时,属性没有更改 我的html:Javascript 属性选择器不更改属性,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我只是想制作一个非常简单的图像滑块。成品在页面中央有一个img,两侧有一个箭头img。当你点击它们时,它应该移动到下一个img,如果在末尾,它应该重新开始,反之亦然。 我要做的是在数组中保存要滑动的图像src字符串。然后我编写了一个函数来遍历数组。我刚开始写了一行代码,将一个图像的属性更改为第一个图像,但当我运行它时,属性没有更改 我的html: <!doctype html> <html> <head> <meta charset="utf-8">
<!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]);
});
“严格使用”;
$(文件).ready(函数(e){
变量图像=[
"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|/用户/Kyle/Desktop/Web项目/Content Slider/images/rsz_dollhouse-tv-show-2.jpg“,
"file:///C|/用户/Kyle/Desktop/Web项目/Content Slider/images/rsz_1alan-tudyk-transformers.jpg”
];
var currentImage=selectImage();
var递增器=-1;
函数selectImage(){
如果(递增者<4){
递增者=递增者+1;
返回递增器;
}否则{
递增器=-1;
选择image();
}
}
//获得第一张幻灯片
$('#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]);
var图像=[
"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|/用户/Kyle/Desktop/Web项目/Content Slider/images/rsz_dollhouse-tv-show-2.jpg“,
"file:///C|/用户/Kyle/Desktop/Web项目/Content Slider/images/rsz_1alan-tudyk-transformers.jpg”
];
函数selectImage(){
如果(递增者<4){
递增者=递增者+1;
返回增量;}
否则{
递增器=-1;
选择image();}
}
var递增器=-1;
var currentImage=selectImage();
//获得第一张幻灯片
$('#image').attr('src',images[currentImage]);
谢谢,来自java,我不习惯在执行之前编写代码。有点头疼。确实让你注意到代码的执行顺序