<!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文件，和使用正确的图片地址
版权声明：本文为博主原创文章，未经博主允许不得转载。
时间： 2024-10-11 17:35:32