您的位置：首页 > Web前端 > JQuery

jquery相册图片来回选择

2015-08-18 16:02 761 查看

<!DOCTYPE HTML>
<html>

<head>
<meta charset="UTF-8">
<script src='jquery-1.6.1.js'></script>
</head>

<style>
.border-img{border:8px solid #ccc;}
</style>

<body>

<div class='div-img'>
<img class='border-img' style='width:100px;height:60px;' src='1.jpg'/>
<img style='width:100px;height:60px;' src='2.jpg'/>
<img style='width:100px;height:60px;' src='3.jpg'/>
<img style='width:100px;height:60px;' src='4.jpg'/>

</div>

<div id="click">

<input id='prev' type='button' value="prev"/>

<input id='next' type='button' value="next"/>

</div>

<script>
//版本一

var imgLength=$(".div-img img").length;

var point=0;
$("#prev").click(function(){

if(point<=0)
{
return false;
}

point--;
$(".div-img img").removeClass('border-img');
$(".div-img img").eq(point).addClass('border-img');

});

$("#next").click(function(){

if(point>=imgLength-1)
{
return false;
}

point++;
$(".div-img img").removeClass('border-img');
$(".div-img img").eq(point).addClass('border-img');

});

//版本二 循环
/*
var imgLength=$(".div-img img").length;

var point=0;
$("#prev").click(function(){

if(point<=0)
{
point=imgLength-1
}
else{

point--;

}

$(".div-img img").removeClass('border-img');
$(".div-img img").eq(point).addClass('border-img');

});

$("#next").click(function(){

if(point>=imgLength-1)
{
point=0;
}

else
{
point++;
}

$(".div-img img").removeClass('border-img');
$(".div-img img").eq(point).addClass('border-img');

});
*/

</script>

</body>
</html>

写了两个版本，一个是来回循环的，另外一个不是来回循环的，使用前请先引用jquery文件，和使用正确的图片地址

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航