0

所以我在我自己构建的 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/

4

2 回答 2

0

您可以通过javascript读取文件夹中的文件数

  1. 使用 PHP，您可以将文件数设置为

    $directory = "../images/team/harry/";
if (glob($directory . "*.jpg") != false)
{
 $filecount = count(glob($directory . "*.jpg"));
 echo $filecount;
}
else
{
 echo 0;
}
于 2012-07-24T10:53:34.407 回答
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++;
    }
  });
});
于 2012-07-24T10:56:44.097 回答