前端轮播小结

转载 2016年06月01日 09:36:27

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

myfocuns前端图片轮播JS插件

  • 2017年08月14日 17:34
  • 1.51MB
  • 下载

Web前端框架之图片轮播

前端框架,前端组件,前端库,都是一个意思,能看源码。 最近做H5小游戏,用到了图片轮播的组件,而且要求支持移动端触屏滑动。一开始用的是nivo slider,但是对大小不一样的图不支持box 的参数设...

【我的javaEE学习】前端例子之图片轮播与打字机

前端
  • suqi356
  • suqi356
  • 2017年12月14日 13:14
  • 11

jQuery图片轮播插件——前端开发必看

HTML代码:      body> div class="slider"> div class="ul-box"> ul> li>a href="...

Web前端笔记之轮播图和定时器

焦点图和轮播 *{ margin: 0; padding: 0; } a{ text-decoration: none; } ...

3D视频轮播插件——web前端

网上找了很多3D视频轮播插件,不是样式不合适,就是代码太繁琐。自己利用CSS3动画transition编写的3D视频轮播插件。 IE9开始才支持transition,所以只有在非IE浏览器、IE大于8...
  • cow3530
  • cow3530
  • 2017年11月23日 12:40
  • 28
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:前端轮播小结
举报原因:
原因补充:

(最多只允许输入30个字)