|
页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="js/jquery-1.3.2-vsdoc.js"></script>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/show-imgs.js"></script>
<link type="text/css" href="css/imgs.css" rel="Stylesheet" />
<title></title>
</head>
<body>
<div><img id="img1" alt="" /></div>
<input type="hidden" id="index" value="0" />
</body>
</html>
show-imgs.js
var data;
//图片数据(可以从后台获取json数据)
$(function() {
$.ajax({
type: "POST",
url: "Handler1.ashx",
dataType: "json",
success: function(msg) {
data = msg;
$("#img1").attr({ height: 300, width: 400 })
$("#img1").attr("src",data[0].name);
},
error: function(err) {
alert(err);
}
})
//初始定义第一张图
var derection = "pre";
//鼠标移动在不同位置所显示的光标图形不一样
$("#img1").mousemove(function(e) {
var x = e.originalEvent.x || e.originalEvent.layerX || 0;
if (x <= $(this).width() / 2) {
this.style.cursor = "url(''image/pre.cur''),auto";
derection = "pre"
}
else {
this.style.cursor = "url(''image/next.cur''),auto";
derection = "next"
}
})
//单击图时，进行图片切换
$("#img1").click(function() {
var index = 0;
if (derection == "pre") {
if (Number($("#index").attr("value")) == 0) {
$("#img1").attr("src", data[0].name)
}
else {
index = Number($("#index").attr("value")) - 1
$("#img1").attr("src", data[index].name)
$("#index").attr("value", index)
}
}
else {
if (Number($("#index").attr("value")) == data.length - 1) {
$("#img1").attr("src", data[data.length - 1].name)
}
else {
index = Number($("#index").attr("value")) + 1
$("#img1").attr("src", data[index].name)
$("#index").attr("value", index)
}
}
})
})
|
