HTML Wrapper

Question

Iam尝试编写一个简单的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");
 });
}

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

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

Answer 1

因为您已经使用了jQuery，请查看循环插件http://jquery.malsup.com/cycle/

Answer 2

你可以使用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的动画队列。

然而，你的选择器发现（“li”）将找到所有的LI元素并将它们全部淡出然后找到它们的兄弟并尝试淡入它们，所以你需要像li这样的东西：first-child或li ：nth-child（x）并保持运行计数。 nth-child的问题在于我不确定IE中是否支持CSS ......但我相信jQuery选择器仍然有用。

无论如何，你将不得不玩它，也许保持一个全局变量，跟踪当前图像并调用next（）（注意检查列表的末尾是否需要你从第一个孩子开始）。您可以使用LI数量的长度来确保这一点，或者保持指向obj的指针＆gt; li：last-child元素并测试它。

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

就个人而言，当我做单车图像时，我只需要创建一个宽度足以容纳所有图像的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

的提示

Answer 3

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

HTML Wrapper

  <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管理所有包含的图像。

使用此代码，您基本上只需要设置#galleryContent div的样式以查看您希望它的外观，并将所有带有alt标签的图像添加到横幅数组中。您还需要将要显示的标题放入#bannerImage。

如果您需要更多代码或帮助，请与我们联系。我认为你可以从上面的链接中得到很好的感觉。

jQuery动态更改图像头

3 个答案:

HTML Wrapper

的jQuery