jquery相冊图片来回选择

<!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文件，和使用正确的图片地址

巴特西

jquery相冊图片来回选择

最新文章

热门文章