所以我在我自己构建的wordpress页面上有这个非常简单(并且可能没有建立推荐方式)的图像滑块。我的问题是,当图像用完时,它只会滑动空白,依此类推。我希望它从头开始滑动,或者只是在最后一张图像处停止滑动。这是我的代码: HTML:
<div id="gallery-wrap">
<div id="gallery">
<img class="galleryimage" src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
<img class="galleryimage2" src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
<img class="galleryimage3" src="http://materiaalit.kotisivut.name/sivustokuvat/ccc.PNG" alt="" />
<img class="galleryimage4" src="http://materiaalit.kotisivut.name/sivustokuvat/coverline.PNG" alt="" />
</div>
<div id="gallery-controls">
<a id="gallery-prev" href="#"><img alt="" /> </a>
<a id="gallery-next" href="#"><img alt="" /></a></div>
</div>
</div>
CSS:
#gallery-wrap{margin: 0 auto; overflow: hidden; width: 100%; position: relative; height:300px; border:1px solid black; border-radius:6px; z-index:3;}
#gallery{position: relative; left: 0; top: 0; width:100%;}
.galleryimage{position:absolute; width:100%; height:300px; top:0px;}
.galleryimage2{position:absolute; width:100%; height:300px; left:100%;top:0px;}
.galleryimage3{position:absolute; width:100%; height:300px; left:200%;top:0px;}
.galleryimage4{position:absolute; width:100%; height:300px; left:300%;top:0px;}
#gallery-controls{width: 100%; z-index:4;}
#gallery-prev{position:absolute; left:0px; top:0px; width:50%; height:300px; }
#gallery-next{position:absolute; right:0px; top:0px; width:50%; height:300px;}
和js / jquery
var position = 1; // you always start at the first image?
$(document).ready(function()
{
$("#gallery-prev").click(function(){
var nr_of_img = $('img', $('#gallery')).length;
if (position == 1)
{
// move all the way to the last image
position = nr_of_img;
}
else
{$("#gallery").animate({"left": "+=100%"}, "slow");
// move to the previous image
position--;
}
});
$("#gallery-next").click(function(){
var nr_of_img = $('img', $('#gallery')).length;
if (position == nr_of_img)
{
// move all the way to the first image
position = 1;
}
else
{$("#gallery").animate({"left": "-=100%"}, "slow");
// move to the previous image
position++;
}
});
});
正如您可能看到的那样,我正在考虑将哪些内容放入变量中。脚本如何知道图像何时耗尽?正如您所看到的,图像是绝对定位的,这是将它们全部放到同一水平线上的最简单方法。 如果有人想看到这个: http://wordpress.kotisivut.name/
答案 0 :(得分:0)
您可以阅读此Count number of files in a folder through javascript
使用PHP,您可以将文件数量设为
$directory = "../images/team/harry/";
if (glob($directory . "*.jpg") != false)
{
$filecount = count(glob($directory . "*.jpg"));
echo $filecount;
}
else
{
echo 0;
}
答案 1 :(得分:0)
为什么不计算滑块中的图像数量...
var nr_of_img = $('img', $('#gallery')).length;
然后你可以从左到右依次计算你的移动次数等,看看你的图像是否已用完。
<强> [编辑] 强>
首先,你的if语句位于错误的位置。您想在事件函数中执行if语句。
这意味着你会做这样的事情
var position = 1; // you always start at the first image?
$(document).ready(function()
{
$("#gallery-prev").click(function(){
var nr_of_img = $('img', $('#gallery')).length;
if (position == 1)
{
// move all the way to the last image
position = nr_of_img;
}
else
{
// move to the previous image
position--;
}
});
$("#gallery-next").click(function(){
var nr_of_img = $('img', $('#gallery')).length;
if (position == nr_of_img)
{
// move all the way to the first image
position = 1;
}
else
{
// move to the previous image
position++;
}
});
});