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='100px;height:60px;' src='1.jpg'/>
	     <img style='100px;height:60px;' src='2.jpg'/>
	     <img style='100px;height:60px;' src='3.jpg'/>
		 <img style='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文件,和使用正确的图片地址

原文地址:https://www.cnblogs.com/brucemengbm/p/7249664.html