这个插件还是借鉴的其他网站用的效果
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
原文地址:http://www.cnblogs.com/wlingling2017/p/7906260.html