【问题标题】:Changing background images, Jquery + CSS更改背景图像,Jquery + CSS
【发布时间】:2010-02-06 05:00:10
【问题描述】:

我正在开发一个客户网站,希望更改“cruise_offers”div 上的背景图片,可能只有 3 - 4 张图片轮换。

我的 jquery 知识非常基础,所以任何帮助都会很棒。

我希望它与 jQuery 一起使用,因为我在网站的其他地方使用它。

我的标记:

<div class="cruise_offers">
    <span class="overlay_bar">
        <a href="cruiseoffers.html">View our Great Cruise Offers</a>
    </span>
</div>

干杯

罗里

【问题讨论】:

    标签: javascript jquery html css


    【解决方案1】:

    查看此链接 - 我做过类似的工作,它可能会有所帮助:

    I found a jquery image rotatation script and adding hyperlinks to the images breaks the animation

    【讨论】:

    • 感谢您的快速响应,尽管该文章并未更改 CSS 中定义的 background-image 属性。它会在 div 内旋转图像,如果我在帖子中没有说清楚,请见谅。
    【解决方案2】:
    $(div.cruise_offers).removeClass('cruise_offers');
    $(div.cruise_offers).addClass('cruise_offers1');
    

    在您的 CSS 中创建具有不同背景图像的类。

    【讨论】:

      【解决方案3】:

      也许这样的事情会起作用(我还没有测试过)。

      var current_image = 0;
      var rotation_speed = 5000; //milliseconds
      var where = $("div.cruise_offers");
      var images = new Array();
          images[0] = 'img1.jpg';
          images[1] = 'img2.jpg';
      
      function change_image() {
          current_image++;
          if (images[current_image].length == 0) {
              current_image = 0;  
          }
          $(where).css("background-image", "url("+images[current_image]+")")  
      }
      
      if (where.length != 0) {
          setTimeout("change_image()", rotation_speed);
      }
      

      【讨论】:

      • 感谢 Eikern,尝试了代码,但不幸的是无法让它工作,我将把网站放到子域中进行进一步的开发和测试,然后再试一次。希望当我在线时您能提供帮助。
      【解决方案4】:

      查看Cycle plugin 并访问页面底部的演示以开始使用。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2013-01-15
        • 2016-01-09
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-01-19
        相关资源
        最近更新 更多