码迷,mamicode.com
首页 > 其他好文 > 详细

前端轮播小结

时间:2016-05-13 09:48:37      阅读:164      评论:0      收藏:0      [点我收藏+]

标签:

git仓库地址https://github.com/wjf444128852/Carousel.git

1、carousel-1效果演示:http://wjf444128852.github.io/demo/Carousel/

主要是tab切换样式的切换,用JS加载的img的src属性,缺点是加载的慢效果不佳。

2、carousel-2效果演示:http://wjf444128852.github.io/demo/carousel_02/

原理:改变ul的left的属性值,到达最右边把该LI从ul的头部remove在append到ul的尾部

3、carousel-3效果演示:http://wjf444128852.github.io/demo/carousel_03/

koringz.github.io的作品,闭包原型链版,兼容性欠缺。

4、carousel-4(推荐,原文:脚儿网)效果演示:http://wjf444128852.github.io/demo/carousel_04/

各种效果集结,只需改个小参数。很好

5、carousel-5(jquery的兼容性好点)效果演示:http://wjf444128852.github.io/demo/carousel-05/

jquery的fadeIn和fadeOut版本,兼容性最好。效果一般

6、carousel-6(javascript改变opacity)效果演示:http://wjf444128852.github.io/demo/carousel-06/

改变透明度,兼容性欠缺

7、carousel-7-1(jquerySlide插件Tab切换)效果演示:http://wjf444128852.github.io/demo/jQuerySlide/demo01.html

插件版,效果佳兼容性佳

8、carousel-7-2(jquerySlide插件轮播效果)效果演示:http://wjf444128852.github.io/demo/jQuerySlide/demo02.html

插件版,效果佳兼容性佳

前端轮播小结

标签:

原文地址:http://www.cnblogs.com/-walker/p/5485721.html

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