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