图片左右游览
页面:
代码
<!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)
}
}
})
})
如果没有设置图片的相对定位，在计算光标就有点麻烦
imgs.css
img{ position:relative; border:0}
引入空间using System.Runtime.Serialization;
实休类imageinfo.cs
[DataContract]
public class ImageInfo
{
[DataMember]
public string name { get; set; }
[DataMember]
public int value { get; set; }
}
引入空间using System.Runtime.Serialization.Json;
获取json数据传
代码
/// <summary>
/// $codebehindclassname$ 的摘要说明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
context.Response.Write(GetImageInfo());
}
private string GetImageInfo()
{
string path = HttpContext.Current.Server.MapPath("image");
string[] files = Directory.GetFiles(path);
JQueryDemo.Data.ImageInfo[] imageinfo = new JQueryDemo.Data.ImageInfo[files.Length];
for (int i = 0; i < files.Length; i++)
{
imageinfo[i] = new JQueryDemo.Data.ImageInfo() { name = files[i].ToString(), value = i };
}
DataContractJsonSerializer json = new DataContractJsonSerializer(imageinfo.GetType());
MemoryStream ms = new MemoryStream();
json.WriteObject(ms, imageinfo);
ms.Position = 0;
StreamReader sr = new StreamReader(ms);
string info = sr.ReadToEnd();
return info;
}
public bool IsReusable
{
get
{
return false;
}
}
}
