从不同的文件夹加载图像
Loading images from different folders
所以我想从不同的文件夹中加载不同的图像。我有一个小难题,您可以将格式更改为 3x3、3x4、4x3 和 4x4 等,现在我希望当有人单击"选择格式"并选择 3x3 时,它会从 3x3 文件夹中加载图像,如果有人单击 4x4,我想要 4x4 文件夹中的图像。
该文件夹看起来像/images/3x3/1.png 或/images/4x4/1.png。就像现在一样,所有图片都从同一个文件夹加载。有什么想法可以解决这个问题吗?我尝试它创建一个新变量,然后使用 if 语句从不同的文件夹中进行选择,但它不起作用。
以下是用于更好地理解的代码:
法典: http://jsfiddle.net/Cuttingtheaces/vkyxgwo6/19/
应该更改文件夹的部分,因为现在它只使用图像文件夹来获取图像:
function changeFormat(x, y) {
var puzzlepieces = [];
var finalValue = x * y - 2;
for (var i = 0; i <= finalValue; ++i) {
puzzlepieces.push(i);
}
puzzlepieces.push('blank')
createSlidingpuzzle(puzzlepieces, x, y);
}
function createSlidingpuzzle(puzzlepieces, x, y) {
var puzzle = '<div id="slidingpuzzleContainer' + x + 'x' + y + '">';
cols=x;
puzzlepieces=shuffle(puzzlepieces);
for (var puzzleNr = 0; puzzleNr < puzzlepieces.length; ++puzzleNr) {
puzzle += '<img src="images/' + puzzlepieces[puzzleNr] + '.png" class="puzzlepiece" id="position' + puzzlepieces[puzzleNr] + '" alt="' + puzzlepieces[puzzleNr] + '" onclick="shiftPuzzlepieces(this);" width="100" height="100" />';
}
puzzle += '</div>';
showSlidingpuzzle(puzzle);
}
提前非常感谢。
如果你想让图像的网址格式为:"/images/3x3/1.png",你必须更改这行代码:
puzzle += '<img src="images/' + puzzlepieces[puzzleNr] + '.png" class="puzzlepiece" id="position' + puzzlepieces[puzzleNr] + '" alt="' + puzzlepieces[puzzleNr] + '" onclick="shiftPuzzlepieces(this);" width="100" height="100" />';
自
puzzle += '<img src="images/' + x + 'x' + y + '/' +[puzzleNr] + '.jpg" class="puzzlepiece" id="position' + puzzlepieces[puzzleNr] + '" alt="' + puzzlepieces[puzzleNr] + '" onclick="shiftPuzzlepieces(this);" width="100" height="100" />';
下面是您的版本分支的一个工作示例:JsFiddle。如果你检查图像,你可以看到它有这样的来源
src="images/3x3/4.jpg"
相关文章:
- 如何在谷歌字体加载时显示加载图像
- 预加载图像并插入DOM
- 加载图像时加载图标
- 在页面启动期间加载图像
- 预加载图像image.onload脚本MVC
- 可以't在我的React组件中加载图像
- 加载图像后调整HTML画布的大小
- HTML/JS github页面项目没有't在使用firefox运行时加载图像或声音
- 错误:$injector:modulerr加载图像时模块处于角度
- 谷歌地图加载后隐藏加载图像
- 在照片查看器(Javascript和jQuery)中异步加载图像时可能出现错误
- 正在从字节数组加载图像内容
- 网页上已有tinymce加载图像列表
- 单击提交按钮后加载图像将冻结
- 如何使用Express'正确加载图像;s的静态中间件
- 使用jquery即时加载图像
- Html5画布使用JCanvasScript加载图像
- Javascript使用JCanvaScript在画布中加载图像
- 使用jquery/ajax显示加载图像
- ajax缓存false无法加载图像