动态jquery标头

Question

我想在我的主页上使用不同的图像做一个标题，并且它们将使用jquery在各种图像之间不断变化。

有什么建议吗？

Answer 1

  

您需要Carousel

以下是Demo

的示例

ASPX代码

<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script language="javascript" type="text/javascript">
    abc();
    var index = 0;
    var images = [
                        'Chrysanthemum.jpg',
                        'Jellyfish.jpg',
                        'Penguins.jpg',
                        'Lighthouse.jpg'
                    ];
    function abc() {

        images = [
                        'Chrysanthemum.jpg',
                        'Jellyfish.jpg',
                        'Penguins.jpg',
                        'Lighthouse.jpg'
                    ];
        $('img').attr('src', images[0]);
        setInterval(change_image, 2000);

    }
    function change_image() {
        if (index >= images.length) index = 0;

        $('img').attr('src', images[index]);
        index++;
    }

</script>

Answer 2

有大量的jQuery图像滑块/旋转器 - 快速谷歌搜索或使用其中一个吗？

http://www.tripwiremagazine.com/2012/01/jquery-image-slider.html

Answer 3

有很多方法，但这样的事情会让你开始。

var index = 0;
var images = [
    'image-0.jpg',
    'image-1.jpg',
    'image-2.jpg',
    'image-3.jpg'
];

$('img#image').attr('src', '/path/' + images[0]);

setInterval(change_image, 5000);

function change_image() {
    index++;
    if (index >= images.length) index = 0;

    $('img#image').attr('src', '/path/' + images[index]);
}

Answer 4

因此，如果您有固定数量的图像，您可以使用jQuery获取它们并循环遍历它们： var bannerNum = 0;

$.ajax({
   url: '/GetImagesList.aspx',
   type: 'GET',
   success: function(d) {
       var intNum = setInterval(5000, function(d){
          if(bannerNum > d.Images.length)
             bannerNum = 0;
          $('#your_image_id').attr('src', d.Images[bannerNum].Src);
          $('#your_image_id').parent().attr('href', d.Images[bannerNum].Href);
          bannerNum++;
       });
   }
});

我做了什么，我已经从服务器请求了横幅列表，然后我创建了每5秒执行一次的超时，它将改变图像的属性src和链接的href。

接下来，在C＃中加载横幅列表并将它们放入列表中，然后使用JavaScript序列化程序将该列表转换为JSON并将其写入响应。

e.g。

public class VOBanner {
    public string Src { get; set; } 
    public string Href {get; set; }
}

<强>逻辑

//Load data from db
List<VOBanner> banners = new List<VOBanner>();
foreach(DataRow rw in datatable.Rows)
{
   banners.Add(new VOBanner { Src = rw["Src"].ToString(), Href = rw["Href"].ToString() });
}
JavaScriptSerializer serializer = new JavaScriptSerializer();
Response.Clear();
Response.Write(serializer.serialize(new { Images = banners } );
Response.End();

那将是基本的逻辑。

我希望这会有所帮助......