jQuery高仿腾讯图片扫瞄器.doc

%@ Page Language=C# AutoEventWireup=true CodeFile=仿腾讯图片浏览器.aspx.cs Inherits=仿腾讯图片浏览器 % !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/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, );