最轻量级的轮播器

 github地址 

https://github.com/idiot/unslider

 

demo演示 

http://unslider.com/

 

infinite: true 的坑点
请注意css的设置、事实上只有5个轮播图。可以理解为。第一个和第七个都被占据并且使用了。所以我们的轮播图索引变成了2-6，而使用infinite模式需要为第七张轮播图设置样式。

.my-slider-li:nth-child(2){background:url("../images/index/banner.jpg")  center center;}
.my-slider-li:nth-child(3){background:url("../images/index/banner-2.jpg")  center center;}
.my-slider-li:nth-child(4){background:url("../images/index/banner-3.jpg")  center center;}
.my-slider-li:nth-child(5){background:url("../images/index/banner-4.jpg")  center center;}
.my-slider-li:nth-child(6){background:url("../images/index/banner-5.jpg")  center center;}
.my-slider-li:nth-child(7){background:url("../images/index/banner.jpg")  center center;}

 

转载于:https://www.cnblogs.com/CyLee/p/6111561.html