jQuery实现简单轮播图效果

本文实例为大家分享了jQuery实现简单轮播图效果的具体代码，供大家参考，具体内容如下

介绍：这里是我使用了计时器的方式实现图片每隔几秒切换然后添加了两个按钮用于上一张和下一张的切换

1、导入jQuery文件

2、设置图片的样式

  *{
   margin: 0;
   padding: 0;
  }
  #box{
   width: 300px;
   height: 300px;
   border: 2px solid red;
  }
  #box img{
   position: absolute;
   display: none;
  }
  #box :first-child{
   display: block;
  }
  .page{
   list-style: none;
   display: flex;
   width: 300px;
   justify-content: space-around;
  }
  .page li{
   border: 1px solid red;
   border-radius: 50%;
   width: 20px;
   height: 20px;
   text-align: center;

  }
  .active{
   background: red;
  }
 
 


 
  
  
  
  
  
 

  
1
  
2
  
3
  
4
 
下一张
上一张

3 进行图片的轮播实现方式

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。