您现在的位置: 万盛学电脑网 >> 程序编程 >> 脚本专题 >> javascript >> 正文

jQuery实例教程:jQuery网页图片切换效果

作者:佚名    责任编辑:admin    更新时间:2022-06-22

  假设你有一组作品,你想不用转跳到另外一个页面就可以显示多个图片,你可以将JPG图片载入到目标元素中去。下面是jQuery图片切换效果示例:

jQuery实例教程:jQuery网页图片切换效果   三联教程

  该示例的核心jQuery代码:

  $(document).ready(function() {

  $("h2").append('<em></em>')

  $(".thumbs a").click(function() {

  var largePath = $(this).attr("href");

  var largeAlt = $(this).attr("title");

  $("#largeImg").attr({

  src: largePath,

  alt: largeAlt

  });

  $("h2 em").html(" (" + largeAlt + ")");

  return false;

  });

  });

  首先给H2添加一个空的<em>元素。

  当点击<p>中的链接

  将链接的href属性保存到 “largePath”变量中。

  然后将标题属性保存到”largeAlt”变量中

  将<img id=”largeImg”>的scr属性用变量 “largePath”替代,而alt属性用变量”largeAlt”替代

  将em(在h2中)的内容设置成变量largeAlt的值。