jquery仿百度图片幻灯浏览功能(2)
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImgSlider2.aspx.cs" Inherits="testbaidu_ImgSlider2" %>
<!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 id="Head1" runat="server">
<title>模拟百度图片浏览</title>
<link href="css/Style.css" rel="stylesheet" type="text/css" />
<script src="../JavaScript/JQuery/Jquery.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
var showCount = 4//每页显示数
var count = 9; //总记录数
var postion = 2; //每次定位到第二个
var i = 0; //轮转值
//传入值
var postindex = 6;
var loadStart = 0;
var loadEnd = 0;
var myTimepre; //向上定时器
var myTimenext; //向下定时器i
//第一次计算仅仅是初始化计算
function setLoadStartAndEnd() {
//为了便于理解没有进行等式的简化
//只显示当前页的图片
if (postindex + 1 - postion > 0 && postindex <= count - showCount) {
loadStart = postindex - postion + 1;
loadEnd = postindex - postion + showCount;
}
//向下按钮为灰色
else if (postindex > count - showCount) {
loadStart = count - showCount;
loadEnd = count - 1;
}
//向上按钮为灰色
else if (postindex + 1 - postion <= 0) {
loadStart = 0;
loadEnd = showCount - 1;
}
}
//计算出数值后开始加载数据
function loadData() {
// alert(loadStart);
// alert(loadEnd);
$("#imgList").html("");
for (j = loadStart; j <= loadEnd; j++) {
$('<p class="noselect"><img imgindex="' + j + '" src="../temp/' + j + '.jpg" /></p>').appendTo($("#imgList"));
}
TrggleEvent();
//alert($("#imgList").html());
}
//设置正常状态下向上按钮样式
function SetSliderPreClass(isclick) {
if (loadStart > 0) {
if (!isclick) {
$("#slidePre").removeClass();
$("#slidePre").addClass("preNormal");
}
}
else {
$("#slidePre").removeClass();
$("#slidePre").addClass("preNone");
}
}
//设置正常状态下向下按钮样式
function SetSlidereNextClass(isclick) {
if (loadEnd >= count - 1) {
$("#slideNext").removeClass();
$("#slideNext").addClass("nextNone");
$("#ImgOn").removeClass().addClass("lastPage");
}
else {
if (!isclick) {
$("#slideNext").removeClass();
$("#slideNext").addClass("nextNormal");
$("#ImgOn").removeClass().addClass("nextPage");
}
}
}
//设置鼠标滑动下向上按钮样式
function SetSliderPreHoverClass() {
if ($("#slidePre").attr("class") != "preNone") {
$("#slidePre").removeClass();
$("#slidePre").addClass("preHover");
}
}
//设置鼠标滑动下向上按钮样式
function SetSliderNextHoverClass() {
if ($("#slideNext").attr("class") != "nextNone") {
$("#slideNext").removeClass();
$("#slideNext").addClass("nextHover");
}
}
function PreDel() {
if (loadStart > 0) {
temp = $("#imgList").html();
$("#imgList").html("");
$('<p class="noselect"><img alt="" imgindex="' + (loadStart - 1) + '" src="../temp/' + (loadStart - 1) + '.jpg" /></p>').appendTo($("#imgList"));
$(temp).appendTo($("#imgList"));
temp = "";
$("#imgList").css("top", "-125");
postindex--;
loadStart--;
loadEnd--;
$("#imgList").stop(true, false).animate({ top: 0 }, 120);
window.setTimeout(function() {
$("#imgList p").eq(4).remove();
SetSliderPreClass(true);
SetSlidereNextClass(false);
TrggleEvent();
}, 120);
}
}
function NextDel() {
if (loadEnd < count - 1) {
$('<p class="noselect"><img alt="" imgindex="' + (loadEnd + 1) + '" src="../temp/' + (loadEnd + 1) + '.jpg" /></p>').appendTo($("#imgList"));
postindex++;
loadStart++;
loadEnd++;
$("#imgList").stop(true, false).animate({ top: -125 }, 120);
window.setTimeout(function() {
$("#imgList").css("top", "0");
$("#imgList p").eq(0).remove();
SetSliderPreClass(false);
SetSlidereNextClass(true);
TrggleEvent();
}, 150);
}
}
$(function() {
setLoadStartAndEnd();
loadData();
SetPosition();
//鼠标移动到按钮的事件
$("#slidePre").hover(function() { SetSliderPreHoverClass(); }, function() { SetSliderPreClass(false); });
$("#slideNext").hover(function() { SetSliderNextHoverClass(); }, function() { SetSlidereNextClass(false); });
SetSliderPreClass(false);
SetSlidereNextClass(false);
//处理向上按钮事件
$("#slidePre").click(function() {
if ($("#slidePre").attr("class") != "preNone") {
PreDel();
}
});
//处理向上按钮事件
$("#slidePre").mousedown(function() {
myTimepre = window.setInterval(function() {
PreDel();
}, 150);
});
//关闭
$("#slidePre").mouseup(function() {
window.clearInterval(myTimepre);
});
//处理向下按钮事件
$("#slideNext").click(function() {
if ($("#slideNext").attr("class") != "nextNone") {
NextDel();
}
});
//处理向下按钮事件
$("#slideNext").mousedown(function() {
myTimenext = window.setInterval(function() {
NextDel();
}, 150);
});
//关闭
$("#slideNext").mouseup(function() {
window.clearInterval(myTimenext);
});
});
function SetPosition() {
//为了便于理解没有进行等式的简化
//只显示当前页的图片
if (postindex + 1 - postion > 0 && postindex <= count - showCount) {
$("#imgList p").eq(1).siblings("p").removeClass().addClass("noselect").end().removeClass().addClass('select');
$("#ImgOn").attr("src", $("#imgList p").eq(1).find("img").attr("src"));
}
//向下按钮为灰色
else if (postindex > count - showCount) {
$("#imgList p").eq(postindex - (count - showCount)).siblings("p").removeClass().addClass("noselect").end().removeClass().addClass('select');
$("#ImgOn").attr("src", $("#imgList p").eq(postindex - (count - showCount)).find("img").attr("src"));
}
//向上按钮为灰色
else if (postindex + 1 - postion <= 0) {
//alert(postindex);
$("#imgList p").eq(postindex).siblings("p").removeClass().addClass("noselect").end().removeClass().addClass('select');
$("#ImgOn").attr("src", $("#imgList p").eq(postindex).find("img").attr("src"));
}
}
function TrggleEvent() {
//选中图片的处理程序
$("#imgList p").click(function() {
//alert($(this).find("img").attr("imgindex"));
postindex = parseInt($(this).find("img").attr("imgindex"));
setLoadStartAndEnd();
loadData();
SetPosition();
SetSliderPreClass(false);
SetSlidereNextClass(false);
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="text-align: center">
<h1>
百度图片浏览模拟程序</h1>
</div>
<div id="imgContainer">
<div id="detailImg">
<table id="imgFrom" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
<tr>
<td style="text-align: center">
图片名称：
</td>
</tr>
</table>
<table id="picWrap">
<tr>
<td id="srcPic" align="center" valign="middle">
<img id="ImgOn" src="" width="600px" height="450px" />
</td>
</tr>
</table>
<table id="picInfo">
<tr>
<td width="38%" align="left">
<span id="imgTitle" style="font-size: 12px"></span>
</td>
<td align="right">
<span class="rate">预览图比例：<span class="fontBar" id="rate"></span></span>
</td>
<td style="width: 70px" align="left">
<a href="javascript:void(0)" class="zoomsrc" id="zoomSrc">查看原图</a>
</td>
</tr>
</table>
</div>
<div id="album">
<div id="slidePre" class="preNormal">
</div>
<div id="smallImgs">
<div id="imgList">
</div>
</div>
<div id="slideNext" class="nextNormal">
</div>
</div>
</div>
</form>
</body>
</html>
以上两种都能实现效果。
转自blog:http://www.cnblogs.com/huhu456
