html左右滑动切换图⽚代码_HTML图⽚切换+标题
addclass，就会不听使唤了，所以添加⼀下这两个⽅法
append打成了addclass
这个练习运⽤最多的就是attr
attr属性了，在这个练习中我不经意间把append
的使⽤：
append()⽅法：在每个 p 元素结尾插⼊内容
JQuery⽂档操作_append()⽅法
举个栗⼦：
举个栗⼦
$("button").click(function(){
$("p").append(" <b>Hello world!</b>");
});
addclass()⽅法：向⼀个元素中添加⼀个类
JQuery属性操作_addclass()⽅法：
举个栗⼦：
$("button").click(function(){
jquery的attr属性
$("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;
});
});

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。