1

我正在尝试编写一个简单的 jQuery 函数来更改我网页的图像标题。

HTML 如下所示：

<div class="slider"> 
<ul>
<li> <img src="img/slide21.png" alt=""> </li>
<li> <img src="img/slide31.png" alt=""> </li>

我只想每 5 秒淡入下一张图像并淡出旧图像。图像的位置不应改变，并且所有图像的大小相同。

我的 js 代码如下所示：

function menu (obj) {
if (!obj.length) {
  return;
}
  $(obj).find("li").hide();
  $(obj).find("li").next().fadeIn(2400);
}
 $(document).ready(function () {
   menu(".slider");
 });
}

这段代码真的不是我想要的，但目前我不知道该怎么做。

任何帮助，将不胜感激！谢谢！

4

3 回答 3

1

由于您已经在使用 jQuery，请查看循环插件http://jquery.malsup.com/cycle/

于 2012-07-06T15:45:24.910 回答
0

你可以使用settimeout：

function change_image(obj) {
    $(obj).find("li").fadeOut();
    $(obj).find("li").next().fadeIn();
}

var menu_obj;
function menu(obj) {
   ...
   menu_obj = obj
   setTimeout("change_image(menu_obj);", 5000);

}

我认为 Fadeout 和 fadein 默认为 500，对于实际的淡入淡出动画来说是半秒。

您也可以执行以下操作：

$(obj).find("li:first-child").delay(5000).fadeOut().next().find("li").fadeIn();

延迟函数延迟 jQuery 的动画队列的地方。

但是，您的选择器 find("li") 将找到所有 LI 元素并将它们全部淡出，然后找到它们的兄弟元素并尝试将它们淡入，因此您需要类似 li:first-child 或 li:nth- child(x) 并保持运行计数。nth-child 的问题是我不确定 IE 是否支持 CSS……但我相信 jQuery 选择器仍然可以工作。

无论如何，你必须使用它，也许保持一个全局变量来跟踪当前图像并调用 next() （小心检查列表的末尾，这需要你开始在第一个孩子结束）。您可以使用 LI 数量的长度来确保这一点，或者保留指向 obj > li:last-child 元素的指针并对其进行测试。

或者，继续按照建议使用图像循环插件。

就个人而言，当我做循环图像时，我只是创建一个足够宽的 div 来容纳所有图像，而 div 的宽度足以容纳一个图像作为其容器，然后将其设置为剪辑任何溢出，并具有一个 jquery 函数每 M 秒将位置或边距更改 N * image_width 因子，其中 N 是图像的数量。

这是一个不同的例子：

http://www.htmlgoodies.com/beyond/javascript/article.php/3881826/JavaScript-Tutorial-Adding-Rotating-Images-to-Your-Web-Site.htm

它至少可以给你一些想法setTimeout

于 2012-07-06T16:13:33.093 回答
0

几个月前，我构建了一个简单的图像转换脚本，效果很好。我的脚本不只是交换图像，而是首先将包含 div 的背景设置为第一个图像。这样，当第一张图像被隐藏时，没有闪烁，而第二张图像淡入。您可以在AdairHomes.com上查看过渡，这是大图像旋转。

HTML 包装器

  <div id="galleryContent" style="background:url(images/simple-banner-image-bath.jpg) top left;">
    <img id="bannerImage" src="<!--Place the first image source here-->" alt="<!--Place your first ALT tag here-->" width="960" height="562" />
  </div>

jQuery

<script type="text/javascript">
    var banners = new Array();
    // Array of images which you want to cycle
    banners = [{"Source":"images/simple-banner-image-construction2.jpg","Alt":"Construction - Framing"},
               {"Source":"images/simple-banner-image-bath.jpg","Alt":"Signature Custom Bathroom"},
               {"Source":"images/simple-banner-image-2659.jpg","Alt":"Model Signature 2659"},
               {"Source":"images/simple-banner-image-kitchen.jpg","Alt":"Signature Custom Kitchen"},
               {"Source":"images/simple-banner-image-2432.jpg","Alt":"Model Signature 2432"},
               {"Source":"images/simple-banner-image-1405.jpg","Alt":"Model Signature 1405"},
               {"Source":"images/simple-banner-image-2830.jpg","Alt":"Model Signature 2830"}];

    var count = banners.length - 1; // subtracting 1 accounts for the array starting at [0]
    var counting = 0;
    going = setInterval(function(){

      $("#bannerImage").fadeOut(200,function(){
        $(this).attr({'src':banners[counting]['Source'],'alt':banners[counting]['Alt']}).fadeIn(200);
      });

      // Select Next Picture
      if(counting != count){counting++;}else{counting = 0;}

      // Set new background image
      $("#galleryContent").css({'background':'url('+banners[counting]['Source']+') top left'});
    },6000);

    var loadCount = 1;

    // Preload images after the first image is displayed
    slowLoad = setInterval(function(){
      if(loadCount < banners.length){
        $("body").append('<img src="'+banners[loadCount]['Source']+'" style="display:none;" />');
        loadCount++;
      }else{
        clearInterval(slowLoad);
      }
    },500);    

</script>

您会注意到我选择将我正在旋转的所有图像保留在一个数组中。这是因为我使用 PHP 管理所有包含的图像。

使用此代码，您基本上只需要设置#galleryContentdiv 的样式以使其看起来像您希望的样子，并将所有带有 alt 标签的图像添加到横幅数组中。您还需要将要首先显示的任何标题放入#bannerImage.

如果您需要更多代码或帮助，请告诉我。我想你可以从我上面的链接中得到很好的感觉。

于 2012-07-06T16:37:19.157 回答