jQuery自制幻灯片代码似乎无法获取图像的当前上下文
jQuery homemade slideshow code seems to be not picking up the current context of the images
我知道这将是一个简单的问题,但我已经看了一整天,努力找到一个答案,所以希望你们这些了不起的人能够帮助。
我已经创建了自己的javascript函数,使用jQuery来创建幻灯片。我知道有很多免费的,我可以使用,但我尝试的少数不允许多个幻灯片显示在同一个页面上,这让我觉得这应该不是太难做到。
在这个页面上我有2个div元素包含图像
<div class="slider">
<img src="./images/Hashimadisaster.png" alt="" title="Hashima Island" class="alignnone size-full wp-image-842">
<img src="./images/DSCN3674-1024x767.jpg" alt="" title="Legs glued together" class="alignnone size-large wp-image-834">
<img src="./images/DSCN3672-768x1024.jpg" alt="" title="The front and rear legs together standing on an Eldar Falcon" class="alignnone size-large wp-image-836">
<img src="./images/DSCN3671-1024x768.jpg" alt="" title="Left rear leg glued into position and balanced to stand on its own" class="alignnone size-large wp-image-835">
<img src="./images/conseptiual-drawing-for-titan-base-1024x609.jpg" alt="Conceptual drawing for titan base" title="Conceptual drawing for titan base" class="alignnone size-large wp-image-841">
</div>
和javascript代码
1. function slidermethod(){
2. var HeightOfBox= 400;
3. var timeoutmilliseconds = 3000;
4. if($('.slider').length){
5. $('.slider').each(function(){
6. $(this).css("position","relative");
7. $(this).children('img').css("position","absolute").css("top","0").css("left","0");
8. if($(this).children('img').length){
9. if($(this).children(".currentslide").length == 0){
10. //alert($(this).children("img").length);
11. //alert("1");
12. // this seems to occur every time it is called
13. $(this).children('img:first').addClass(".currentslide");
14. }
15. else{
16. if($(this).children('.currentslide').next().length) {
17. alert("2");
18. var nextchild = $(this).children('.currentslide').next();
19. $(this).children('img').removeClass('.currentslide');
20. $(nextchild).addClass(".currentslide");
21. }else{
22. alert("3");
23. $(this).children('img').removeClass('.currentslide');
24. $(this).children('img:first').addClass(".currentslide");
25. }
26. }
27. }
28. $(this).children('img').css("height",HeightOfBox + "px");
29. $(this).css("height",HeightOfBox + "px");
30. });
31. setTimeout("slidermethod();",timeoutmilliseconds);
32. // every 3 seconds call this method
33. }
34.}
35.slidermethod(); // call the method
代码运行时没有弹出任何错误,并捕获所有图像,调整它们的大小并将它们放在彼此的顶部。我有一个css样式表。currentslide作为z-index:2;所有其他的像都是1。但在代码底部,有一个settimeout()它会在3秒后再次调用相同的方法但它似乎总是进入if语句
9. if($(this).children(".currentslide").length == 0){
但是如果我firebug它,我可以看到图像组中的第一张图像具有"currentslide"类,所以这应该不是0。
这里有错误
.addClass(".currentslide")
应为
.addClass("currentslide")
在你所有的addclass/removecclass中你犯了同样的错误
和一个更好的路径来启动你的插件
$.fn.extend({
slider : function() {
$(this).each(function() {
var $sldr=$(this);
$sldr.css("position","relative")
.find("img").css("position","absolute").css("top","0").css("left","0").end()
.find("img:first-child").addClass("currentslide").end()
.on("nextslide",function() {
var $current = $sldr.find(".currentslide").removeClass("currentslide")
if ($current.next().get(0)) $current.next().addClass("currentslide")
else $sldr.find("img:first-child").addClass("currentslide")
});
setTimeout(function(){$sldr.trigger("nextslide"),3000 });
});
return this;
}
});
$(".slider").slider();
我复制了你的代码但你应该把这些CSS属性移到你的CSS文件中,它们不需要在插件中设置,所以它变成了
$sldr.on("nextslide",function() {
var $current = $sldr.find(".currentslide").removeClass("currentslide")
if ($current.next().get(0)) $current.next().addClass("currentslide")
else $sldr.find("img:first-child").addClass("currentslide")
}).find("img:first-child").addClass("currentslide");
检查失败的原因是.children()返回0。
不如这样做:
if($('.slider img').hasClass('currentslide').length < 1){ /*your code*/ }
我同意mikakun的观点。通过调用$(this),您肯定会多次跳转到DOM。将$('.slider')设置为一个变量,并在需要的地方使用该变量。
相关文章:
- 获取ajax加载的图像的大小
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- 如何使用javascript和xpath获取图像src
- 如何使用javascript从文件夹中获取图像并发布直接链接
- 如何使用Pixijs获取在加载的精灵表资产中定义的图像
- 如何从 javascript 中可能具有一个或多个图像的字符串中仅获取图像名称
- 获取图像节点js的主色
- 获取图像的平均外部像素颜色
- 使用asp.net FileUpload时从javascript获取图像宽度和高度
- 如何获取显示在谷歌搜索右侧的图像链接
- CodeIgniter:用于获取包括图像在内的值的控制器
- jQuery:获取图像加载错误的详细信息
- 如何使用php和javascript获取网页中显示图像的路径
- 使用回调获取图像像素数据
- 使用JavaScript从外部图像获取颜色
- 将完整路径图像获取到输入文件中
- 如何利用织物画布上的背景图像获取绘图路径中的图像
- 无法将图像加载到画布中并为该图像获取base64编码
- Android从内部图像获取ImageData()-SECURITY_ERR:DOM异常18
- 将html转换为图像(获取dom的快照)