简单实现jquery轮播图

最新推荐文章于 2022-09-03 10:39:40 发布

执。

最新推荐文章于 2022-09-03 10:39:40 发布

阅读量578

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端文章标签： jquery 轮播图 web

本文链接：https://blog.youkuaiyun.com/qq_21484935/article/details/90580485

前端专栏收录该内容

8 篇文章

订阅专栏

本文介绍了使用jQuery实现轮播图的方法。包括定义切换图片的函数，实现图片显示、隐藏及样式切换；编写自动播放函数，每5秒切换一次图片；给切换按钮绑定事件，点击时停止并重启自动播放；点击小圆点可传索引切换图片；鼠标悬停暂停自动切换，移开恢复。

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

首先需要定义个切换图片的funcation

1、找到图片所在li，将其显示出来，并缩放1.1倍

2、其他兄弟li，渐变隐藏，并还原至原大小比例

3、将底部的圆点列表ul中对应的li，添加样式，其他兄弟元素移除该样式

function changeimg(a){
  $('.imgs li ').eq(a).fadeIn(500).css("transform" ,"scale(1.1)").
  		siblings().fadeOut('slow').css("transform" ,"scale(1.0)");
  		
  $('.btn-list li').eq(a).addClass('active-list').siblings().removeClass('active-list');
 };

写一个自动播放的funcation，实现每5秒自动切换

1、定义一个全局 time，和set

2、设置每5秒切换一次图片

 function autoplay(){
  time = setInterval(function(){
   set++ ;
   if(set > len -1 )
   {
    set = 0 ;
   }
   changeimg(set) ;
  } , 5000);
 };

给切换按钮绑定事件

1、点击切换按钮时候，得先停止自动播放

2、根据所点击的按钮将全局变量set自增或者自减

3、将自动播放开启

//btn
 //up
 $('.btn .up').click(function(){
  clearInterval(time) ;
  
  set-- ;
  if(set < 0 )
  {
   set = len-1 ;
  }
  changeimg(set) ;
  autoplay() ;
 });
 //down
 $('.btn .down').click(function(){
  clearInterval(time) ;
  
  set++ ;
  if(set === len )
  {
   set = 0 ;
  }
  changeimg(set) ;
  autoplay() ;
 });

写完以上内容，我们就剩下最后一个步骤了。如果点击那些小圆点，要如何才能切换到对应的图片上去。问题其实不难，回头看下，咱们写的切换图片函数，是需要传参的，这也就意味着我们只需要找到对应的小圆点的索引传进函数里，就可以实现。

//btn-list
 $('.btn-list li').click(function(){
  clearInterval(time) ;
  set = $(this).index() ;
  changeimg(set) ;
  autoplay() ;
 });

这里我们需要注意一下，也是需要先暂停自动切换。

再次回头我们发现，还漏掉了一个环节。如果当鼠标移动上去的时候，需要让自动切换暂停，鼠标移开，又开始自动切换。这里我们使用到了hover

注意注意！time是全局的，所以我们可以访问到

$('.imgs li').hover(function(){clearInterval(time)} , function(){autoplay()});