无法使代码工作请帮忙。 [英] Unable to make the code work please help.
本文介绍了无法使代码工作请帮忙。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个包含500多张图像的文件夹，我想将图像显示在滑块中。通常长的方法是写出所有500个文件的名称，然后显示它然后我想增加图像大小让我们说超过1000然后我必须再写500个名字然后继续。所以另一种方法是使用脚本获取以img_开头的所有图像名称并将它们存储到一个数组中，然后在按下滑块上的下一个按钮并显示它时随机化数组。我无法做到这一点。什么都没有显示出来。请帮助。
I have a folder with over 500 images, I want to display the images into a slider. usually the long method is to write the names of all the 500 files and then get it displayed bu then i want to increase the images sizes to lets say over 1000 then i have to write another 500 names and this continue. so another way is to use a script to get all the names of images starting with img_ and store them into an array and then randomize the array when u press the next button on the slider and display it. i am not able to do that. nothing is being displayed. help please.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- directorySlider Javascript file -->
<script src="js/directorySlider.js"></script>
<script src="js/directorySlider.min.js"></script>
<script>
$('#slider-main').directorySlider({
animation: 'fade',
filebase: 'img_',
directory: 'images/',
extension: 'jpg',
numslides: 5,
height: 240,
width: 320,
timeout: 2000
})
</script>
</head>
<body>
<div class="directorySlider" id="slider-main"></div>
</body>
</html>
我尝试过：
What I have tried:
/**
* directorySlider v0.9 - Loads all images in a specified directory and creates a slide show
* Author: Justin W. Hall
* http://www.justinwhall.com/directory-jquery-slider/
*
* License: GPL v3
*/
(function($){
var directorySlider = function(element, options)
{
var elem = $(element),
obj = this,
elemId = elem[0].id;
// Merge config settings
var config = $.extend({
animation: 'slide',
filebase: 'slide_',
extension: 'jpg',
speed: 1000,
timeout: 4000,
directory: null,
numslides: null,
height: null,
width: null
}, options || {});
// set slideshow dimensions if set
if (config.height) {
$(elem).css('height', config.height);
}
if (config.width) {
$(elem).css('width', config.width);
}
$(elem).css('overflow', 'hidden');
// Get slides
var slides = [],
slideNumber = 1;
while(slideNumber <= config.numslides){
slides.push('<img src="' + config.directory + config.filebase + slideNumber + '.' + config.extension + '" />');
slideNumber++;
}
// append slideshow
// apply slide wrap 1st
var slideWrap = $('<div class="' + elemId + '-slide-wrap"></div>');
slideWrap.appendTo(elem);
// append slide and position absolutley
$.each(slides, function(index, val) {
$(val).css({
position: 'absolute',
top: 0,
left: 0,
width: config.width // ADDED THIS SO WE DON'T NEED TO HAVE ALL IMAGES WITH SAME HEIGHT & WIDTH
}).appendTo(slideWrap);
});
setInterval(function(){
var firstSlide = elem.find('img:first-child'),
lastSlide = elem.find('img:last-child');
// Apply animation
switch(config.animation){
case 'fade':
$(lastSlide).animate({
opacity: 0},
config.speed, function() {
$(this).insertBefore(firstSlide).css('opacity', 1);
});
break;
case 'uncover':
lastSlide.animate({
marginLeft: -$(this).width()},
config.speed, function() {
$(this).insertBefore(firstSlide).css('marginLeft', 0);
});
break;
default:
$(lastSlide).animate({
opacity: 0},
config.speed, function() {
$(this).insertBefore(firstSlide).css('opacity', 1);
});
}
}, config.timeout);
};
$.fn.directorySlider = function(options)
{
return this.each(function()
{
var element = $(this);
// Return early if this element already has a plugin instance
if (element.data('directoryslider')) return;
// pass options to plugin constructor
var directoryslider = new directorySlider(this, options);
// Store plugin object in this element's data
element.data('directoryslider', directoryslider);
});
};
})(jQuery);
这是javascript。仍然不会显示任何输出
this is the javascript. still it won't show any output
推荐答案
（' #slide-main'）。directorySlider（{
animation：' fade'，
filebase：' img _'，
目录：' images /'，
扩展名：' jpg'，
numslides： 5 ，
height： 240 ，
宽度： 320 ，
超时： 2000
}）
< / script>
< / head >
< body>
< div class = directorySlider id = slider-main> < / div >
< / 正文 >
< / html >
('#slider-main').directorySlider({ animation: 'fade', filebase: 'img_', directory: 'images/', extension: 'jpg', numslides: 5, height: 240, width: 320, timeout: 2000 }) </script> </head> <body> <div class="directorySlider" id="slider-main"></div> </body> </html>
我尝试过：
What I have tried:
/**
* directorySlider v0.9 - Loads all images in a specified directory and creates a slide show
* Author: Justin W. Hall
* http://www.justinwhall.com/directory-jquery-slider/
*
* License: GPL v3
*/
(function(
）{
var directorySlider = function （element，options）
{
var elem =
){ var directorySlider = function(element, options) { var elem =
（元素），
obj = 此，
elemId = elem [ 0 ]。id;
// 合并配置设置
var config =
(element), obj = this, elemId = elem[0].id; // Merge config settings var config =
这篇关于无法使代码工作请帮忙。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
