html点击按钮切换图片代码_HTML图片切换+标题

这个练习运用最多的就是attr属性了，在这个练习中我不经意间把append打成了addclass，就会不听使唤了，所以添加一下这两个方法的使用：

JQuery文档操作_append()方法：在每个 p 元素结尾插入内容

举个栗子：

$("button").click(function(){
  $("p").append(" <b>Hello world!</b>");
});

JQuery属性操作_addclass()方法：向一个元素中添加一个类

举个栗子：

$("button").click(function(){
  $("p:first").addClass("intro");
});

正文

HTML代码

<h2>图片切换</h2>
		<div class="head"><img id="Gpimag" src="img/01.jpg" /></div>
		<p class="last_img">
			<a href="img/01.jpg"><img src="img/01.jpg" alt="标题一" /></a>
			<a href="img/02.jpg"><img src="img/02.jpg" alt="标题二" /></a>
			<a href="img/03.jpg"><img src="img/03.jpg" alt="标题三" /></a>
			<a href="img/04.jpg"><img src="img/04.jpg" alt="标题四" /></a>
		</p>

CSS修饰

body {
				width: 700px;
				height: 650px;
				border: 1px solid red;
				margin: 0 auto;
				padding: 0;
				text-align: center;
			}
			
			h2 {
				float: left;
				margin-left: 20px;
			}
			
			img {
				margin: auto;
			}
			
			.head img {}
			
			.last_img img {
				width: 160px;
				border: 1px solid cornflowerblue;
			}

JQuery

$(document).ready(function(){
				$("h2").append('<em></em>');
				$(".last_img a").click(function(){
					var $p1=$(this).attr("href");
					var $p2=$(this).attr("title");
					$("#Gpimag").attr({src :$p1,alt: $p2});
					$("h2 em").html("("+$p1+")");
					return false;
				});
			});