# Carousel

**Repository Path**: WEBh/wheel_chart_plugin

## Basic Information

- **Project Name**: Carousel
- **Description**: 轮播图插件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2018-09-10
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 轮播图插件

#### 项目介绍
轮播图插件

#### 参数说明
  
-   autoScroll : true, //是否滚动
-   fadeIn: false, //默认是左右滚动切换的，fadeIn设置为true是淡出淡入切换的效果
-   speed:3000,  //滚动的时间默认是3秒
-   numControl:false, //锚点默认是false，设置为true时显示
-   arrowControl:false  //左右箭头默认是false，设置为true时显示
-   onChange:fn    //拿索引值判断的回调函数

              

#### 使用说明

1. 基于jquery1.9以上版本封装
2. 网页dom结构如下
 
```
  <div class="slider" id="slider">
    <ul>
      <li><img src="url" /></li>
      <li><img src="url" /></li>
      <li><img src="url" /></li>
    </ul>
  </div>

  //可以通过data-config传对象参数
  <div class="slider" id="slider2" data-config='{
      "numControl" : true,
      "speed" : 2000,
      "numControl":true,
      "arrowControl":true
    }'>
    <ul>
      <li><img src="url" /></li>
      <li><img src="url" /></li>
      <li><img src="url" /></li>
    </ul>
  </div>
  <script src="js/jquery-1.12.4.min.js"></script>
  <script src="js/slider.js"></script>
  <script>
     $(function(){
       $("#slider").slider({
           autoScroll : true, //是否滚动
           fadeIn: false, //默认是左右滚动的，fadeIn设置为true是淡出淡入的效果
           speed:3000,  //默认3秒
           numControl:true, //锚点
           arrowControl:true,  //左右箭头
           onChange:function(index) {
              console.log(index)
           }
       });
    
       $("#slider2").slider()
     });
  </script>
```
3. 喜欢先star在拉取代码，谢谢！