【开源】一个开放的轮播插件

简介：该插件由本人开发制作,并取名Rotation，面向全网免费使用，是一款轻量化的首页轮播图插件，下面我们来看看该如何使用吧~

插件可直接在线引用，也可下载下来本地化(推荐在线引用，可保持更新

引用地址:https://assets.huoyinetwork.cn/Frish/JS/Rotation.js

<script src="https://assets.huoyinetwork.cn/Frish/JS/Rotation.js"></script>

使用方法

1. 写html代码

   <div class="latest-re-cp"> ---大容器
           <div class="latest-rq">  ---小容器
               <ul> 1 </ul>
               <ul> 2 </ul>
               <ul> 3 </ul>
           </div>
           <ul class="latest-an"> ---放小圆点的容器
               要几个小圆点就放几个<li>
               <li></li>
               <li></li>
               <li></li>
            </ul>
   </div>
   左右按钮，可以自己定义，名字要和js的名字对应
   <button class="latest-re-left">左移</button>
   <button class="latest-re-right">右移</button>
   

2. 首先在html中引入jQuery框架,一定要比我的框架先引用！！！

   • 直接引用网上的代码

   • 或者下载源代码

     https://www.jq22.com/jquery-info122

3. html引入Rotation.js

4. 写一个css代码

   /* 给外边大容器一个宽高 */
   .latest-re-cp{
   	width:500px;
   	height:300px;
   }
   

    

5. 自己新建一个js文件，例如index.js，并把它引入到html中，顺序一定不要搞错！！！引入顺序：jquery>Rotation.js>自己的js文件

   • 在自己的js中写:

     Rotation({
        //外边大容器   class名字前面记得加 "." ,id加"#" !!!!!!!!
        max_content: ".latest-re-cp",
        // 小容器 
        content: ".latest-rq",
        // 轮播的间隔时间
        speed: 4000,
        // 左边按钮
        left: ".latest-re-left",
        // 右边按钮
        right: ".latest-re-right",
        // 是否显示小圆点
        isdoc: true,
        // 装小圆点的容器
        dot: ".latest-an",
        // 小圆点选中的颜色
        doc_color: "#DB6400"
      });