1、磁力图片：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
* {
font-family:微软雅黑;
}
img {
position:absolute;
}
</style>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(function () {
$(document).click(function (a) {
$("img").animate({ left: a.pageX, top: a.pageY }, 2000);
});
});
</script>
</head>
<body>
<img src="Images/cat.jpg" />
</body>
</html>
2、轮播图：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="Style/demo2.css" rel="stylesheet" />
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
var num = 0;//记录下当前显示的图片的索引
$(function () {
$(".imgitem").not(":eq(0)").hide();//页面加载的时候，第一张图片显示。
setInterval(function () {//隔多久，执行一次方法
num++;
if (num == 5)
{
num = 0;
}
ShowFocusPic();
}, 5000);
$(".btn a").click(function () {
num = $(".btn a").index($(this));//当前点击的下标在整个下标里面的索引，把这个索引值转成整数赋值给num
ShowFocusPic();
});
});
function ShowFocusPic()
{
$(".imgitem").eq(num).show();
$(".imgitem").not(":eq(" + num + ")").hide();
$(".btn li a").eq(num).addClass("selected");
$(".btn li a").not(":eq(" + num + ")").removeClass("selected");
}
</script>
</head>
<body>
<div id="list">
<div class="imgitem"><img src="Images/2.png" /></div>
<div class="imgitem"><img src="Images/3.jpg" /></div>
<div class="imgitem"><img src="Images/4.jpg" /></div>
<div class="imgitem"><img src="Images/5.jpg" /></div>
<div class="imgitem"><img src="Images/6.jpg" /></div>
<div class="btn">
<ul>
<li><a href="#" class="selected">1</a></li>
<li><a href="#">2</a></li>
<li