欢迎光临
我们一直在努力

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

简介:该插件由本人开发制作,并取名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框架,一定要比我的框架先引用!!!

  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"
       });
      

       

赞(7) 打赏
0

评论 3

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #1
    头像

    wow,作者牛逼

    frish11个月前 (12-05)回复

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏