jQuery高仿腾讯图片浏览器
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="仿腾讯图片浏览器.aspx.cs" Inherits="仿腾讯图片浏览器" %>
<!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 runat="server">
<title></title>
<style type="text/css">
#bigimg img
{
width: 510px;
height: 300px;
padding: 0px;
}
#smallimg img
{
width: 100px;
height: 110px;
padding: 0px;
margin: 2px;
}
#bigimg
{
width: 503px;
}
</style>
<script src="Jquery1.7.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#smallimg img:eq(0)').css("border", '5px solid red'); //默认第一张图片有边框
$('#smallimg img').click(function () {
$('#smallimg img').css("border", "");
$(this).css("border", '5px solid red');
var path = $(this).attr("src");
$('#bigimg img').attr("src", path);
}) //单击小图片显示大图片
var array = new Array('0.jpg', '1.jpg', '2.jpg', '3.jpg', '4.jpg');
var num = 0;
$('#rightimg').bind('click', function () {
num++;
if (num >= array.length) {
num = 0;
}
$('#bigimg img').attr('src', 'images/' + array[num]);
$('#smallimg img').css("border", "");
var im = $('#smallimg img');
im.each(function (index) {
if ($(this).attr('src') == $('#bigimg img').attr('src')) {
$(this).css("border", '5px solid red');
}
})
})//后一张
$('#leftimg').click(function () {
num--;
if (num < 0) {
num = array.length - 1;
}
$('#bigimg img').attr('src', 'images/' + array[num]);
$('#smallimg img').css("border", "");
var im = $('#smallimg img');
im.each(function (index) {
if ($(this).attr('src') == $('#bigimg img').attr('src')) { //循环遍历小图片的路径(src)，当小图片的src等于大图片的src时，小图片加边框
$(this).css("border", '5px solid red');
}
})
}) //前一张
$('#leftimg').show();
$('#rightimg').show(); //开始时默认图片都显示
$('#bigimg').mousemove(function (e) {
if (e.originalEvent.x < 255) { //e.originalEvent.x:div的横坐标
$('#leftimg').show();
$('#rightimg').hide();
}
else {
$('#rightimg').show();
$('#leftimg').hide();
}
})//切换箭头图片
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="height: 303px">
<div style="float: left">
<img id="leftimg" src="images/left.png" alt="前一页" style=" position:absolute; top:120px; left:20px"/></div>
<div style="float: left" id="bigimg">
<img src="images/0.jpg" /></div>
<div style="float: left">
<img id="rightimg" src="images/right.png" alt="后一页" style=" position:absolute; top:120px; left:450px"/></div>
</div>
<div id="smallimg">
<a href="#"><img src="images/0.jpg" /></a>
<a href="#"><img src="images/1.jpg" /></a>
<a href="#"><img src="images/2.jpg" /></a>
<a href="#"><img src="images/3.jpg" /></a>
<a href="#"><img src="images/4.jpg" /></a>
</div>
</form>
</body>
</html>