最轻量级的轮播器
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;}