基于JQuery 编写轮播图插件

基于JQuery 编写轮播图插件

不管是实际开发还是平时的小项目中 ，页面一定有且多个的轮播图，那么为了效率大家可以考虑封装这样的小插件。下面一起看看他的使用方法吧

使用需要准备（往下滑动会看到）：

1.jquery官方代码

2.需要复制jQuery.wdcarousel.js（这里是基于JQ封装的代码）

3.需要复制jQuery.wdcarousel.css（这里是关于轮播图所写大样式）

以上三个东西准备好后下面是使用方法

使用方法，例子

*

//  html中写入一个元素     可以是 class或者id
<div class="banner"></div>

**

//复制  script标签内的代码  
//原理：利用对象传参的方式 便于代码的多次重复使用  
//每次使用时：调用wdcarousel方法， (暂不支持过个元素传入)

<script type="text/javascript">
            jQuery(function($) {
    
                $('.banner').wdcarousel({
   //必填参数  （css选择器 选择元素）
                    ele: '.banner',//必填参数  （css选择器 选择元素）
                    width: 1290,//宽
                    height: 500,//高
                    type: 'fade',//轮播样式  ：horizontal水平无缝/vertical垂直无缝/fade淡入淡出
                    page:true,//是否生成页  默认为true
                    pageNum: true,//是否显示分页 是：true 否：false
                    seamless: true,//是否选择无缝
                    button: true,//是否显示左右按钮
                    duration: 3000,//速度
                    //图片路径：必填参数
                    imgs: [
                        "src/img/banner1.jpg",
                        "src/img/banner2.jpg",
                        "src/img/banner3.jpg",
                        "src/img/banner4.jpg",
                        "src/img/banner5.jpg",
                        "src/img/banner6.jpg",
                        "src/img/banner7.jpg",
                    ]
                });

            })
        </script>

“下面是需要的js代码与css代码”

下载与安装JQuery

• 官网下载
  http://jquery.com/download/
• CDN
  
  • https://code.jquery.com/jquery-3.0.0.js
  • https://code.jquery.com/jquery-3.0.0.min.js

jQuery.wdcarousel.js代码

下面是jQuery.wdcarousel.js的代码

;(function($){
   
    jQuery.prototype.wdcarousel = function(obj){
   
        // 创建对象
        var Carousel = function(options){
   

            // 属性
            // 默认值
            let defaults = {
                ele: '',//必填参数
                imgs: [],//必传参数
                // 默认宽高
                width: 810,
                height: 320,
                index: 0,
                page:true,//是否显示分页
                pageNum:false,
                button: true,//左右按钮
                aaa:true,//数据
                type: 'vertical',//默认模式
                seamless: true,//是否无缝滚动
                duration:3000 //默认轮播间隔时间
            }

            // 扩展默认函数
            this.opt = Object.assign({}, defaults,options);
            this.len = this.opt.imgs.length;
            // 用来区分无缝时的遍历次数
            this.lastNum = 0;
            // 初始化并传参数
            this.init(