Jquery图片浏览

来源：互联网发布：淘宝省钱app有哪些编辑：程序博客网时间：2024/06/07 10:18

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

img{ width:300px; height:400px;}

a{ position:relative; top:-200px;}

#myid1

{

position: absolute;

width:300px;

height:200px;

background-color:#000;

filter:alpha(Opacity=1);

margin-top:0px;

margin-left:0px;

}

#myid2

{

width:300px;

height:200px;

background-color:#000;

filter:alpha(Opacity=1);

position:absolute;

margin-top:200px;

margin-left:0px;

}

</style>

$(function () {

var array = new Array('1.jpg', '2.jpg', '3.jpg', '4.jpg', '5.jpg');

var count = 0;

$('img').attr('src', 'images/' + array[count]);

$("#myid1").bind("mouseenter", function () {

$("#divContent").html("前¡ã一°?张?");

})

$("#myid2").bind("mouseenter", function () {

$("#divContent").html("后¨®一°?张?");

})

$('#myid1').bind('click', function () {

count++;

//如¨?果?count大ä¨®于®¨²数ºy组Á¨¦的Ì?最Á?大ä¨®下?标À¨º，ê?则¨°归¨¦零¢?，ê?继¨¬续?循-环¡¤

if (count > (array.length - 1)) {

count = 0;

}

//无T论?是º?否¤?满¨²足Á?上¦?面?的Ì?if条¬?件t，ê?都?会¨¢执¡ä行D

$('img').attr('src', 'images/' + array[count]);

})

$('#myid2').bind('click', function () {

count--;

//如¨?果?count大ä¨®于®¨²数ºy组Á¨¦的Ì?最Á?大ä¨®下?标À¨º，ê?则¨°归¨¦零¢?，ê?继¨¬续?循-环¡¤

if (count < 0) {

count = array.length - 1;

}

//无T论?是º?否¤?满¨²足Á?上¦?面?的Ì?if条¬?件t，ê?都?会¨¢执¡ä行D

$('img').attr('src', 'images/' + array[count]);

})

</script>

</head>

<body>

<img />

</form>

</body>

</html>