jquery相册图片来回选择

最新推荐文章于 2024-11-06 08:40:32 发布

Baron的博客

最新推荐文章于 2024-11-06 08:40:32 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html 文章标签： web html css js 前端

本文链接：https://blog.youkuaiyun.com/u013047660/article/details/47753291

html 专栏收录该内容

27 篇文章

订阅专栏

本文介绍如何使用HTML、CSS和JavaScript实现图片轮播功能，包括代码实现和样式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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