码迷,mamicode.com
首页 > Web开发 > 详细

这周用到的圆形轮播插件 mislider.js

时间:2017-11-27 23:45:19      阅读:325      评论:0      收藏:0      [点我收藏+]

标签:com   mis   特点   min   回调函数   www   网址   图片显示   木马   

这个插件还是借鉴的其他网站用的效果

 技术分享图片

1、介绍 mislider

  mislider是一款效果非常酷的jQuery响应式圆形图片轮播特效插件。该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效。该轮播图插件的特点有:

  • 使用简单
  • 在同一个屏幕中支持多个轮播图
  • 轮播图的内容可以是单张图片或复杂的HTML内容
  • 轻量级
  • 响应式设计
  • 非常容易定制
  • 丰富的回调函数
  • 跨浏览器,支持IE8+浏览器

2、引入js和css文件:

  • jquery.min.js
  • mislider.js
  • mislider.css
  • mislider-custom.css

3.构建HTML

<h1>mislider图片轮播效果</h1>
        <div class="mis-stage">
              <ol class="mis-slider">
                <li class="mis-slide">
                    <img src="img/m1.jpg" alt="故宫">
                </li>
                <li class="mis-slide">
                        <img src="img/m2.jpg" alt="黄山">
                    </li>
                    <li class="mis-slide">
                        <img src="img/m3.jpg" alt="石林">
                    </li>
                    <li class="mis-slide">
                        <img src="img/m4.jpg" alt="圆明园">
                    </li>
                    <li class="mis-slide">
                        <img src="img/m5.jpg" alt="千岛湖">
                    </li>
              </ol>
        </div>

 4.写入初始化插件

<script>
             jQuery(function($){
                 var slider = $(".mis-stage").miSlider();
            })
        </script>

  大致样式就成了,如果需要更漂亮的样式 可以修改mislider-custom.css样式  , js也是可以修改的 ,不过在修改之前要先看清楚注释

借鉴网址:https://www.cnblogs.com/charmingyj/p/5688112.html

这周用到的圆形轮播插件 mislider.js

标签:com   mis   特点   min   回调函数   www   网址   图片显示   木马   

原文地址:http://www.cnblogs.com/wlingling2017/p/7906260.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!