70+不同类型的jQuery Slider教程与DEMO

编辑推荐: 掘金是一个高质量的技术社区,从 CSS 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。 点击链接查看最新前端内容,或到各大应用市场搜索「 掘金」下载APP,技术干货尽在掌握中。

70+不同类型的jQuery Slider教程与DEMO

SliderShow效果在国内大多数前端人员喜欢称之为幻灯片效果,不过用“slidershow”这个词搜索相关资料会比使用中文来得方便一些,而且这个效果现在在各种类型网站上都均能看见,可是有很多初学者,或者不懂javasrcipt的同学,要制作这种效果还是非常的困难。这些天趁着做策划案的需求,搜寻了一些这方面的案例与教程,并且统一了一下。仔细一看各种类型效果还真不少,我这里收集了近70种不同类型的效果,当然这些效果并不能满足用户千奇百怪的需求,但希望这些教程与案例能帮助您找到创意,或者在这些基础上做出一定的修改。最主要的是能帮您解决工作之需。下面我们一起来看看这些效果吧:

1、Beautiful Photo Stack Gallery with jQuery and CSS3

Beautiful Photo Stack Gallery with jQuery and CSS3

2、Cloud Carousel – A 3d Carousel

Cloud Carousel – A 3d Carousel

3、Nivo Slider – Image Slider

Nivo Slider – Image Slider

4、Smooth Div Scroll

Smooth Div Scroll

5、s3Slider jQuery plugin

s3Slider jQuery plugin

6、Sliding Image Gallery

Sliding Image Gallery

7、easySlider

easySlider

8、jQuery Lightbox plugin

jQuery Lightbox plugin

9、Slider Gallery

Slider Gallery

10、Spacegallery

Spacegallery

11、prettyPhoto

prettyPhoto

12、Camera

Camera

13、Slides

Slides

14、Coin Slider

Coin Slider

15、ResponsiveSlides.js

ResponsiveSlides.js

16、Responsive Image Gallery with Thumbnail Carousel

Responsive Image Gallery with Thumbnail Carousel

17、Slicebox – A fresh 3D image slider with graceful fallback

Slicebox – A fresh 3D image slider with graceful fallback

18、Draggable Image Boxes Grid

Draggable Image Boxes Grid

19、SLIDORION

SLIDORION

20、JCOVERFLIP

JCOVERFLIP

21、The Lof JSiderNews Plugin

The Lof JSiderNews Plugin

22、Elastislide – A Responsive jQuery Carousel Plugin

Elastislide – A Responsive jQuery Carousel Plugin

23、Circular Content Carousel with jQuery

Circular Content Carousel with jQuery

24、Skitter

Skitter

25、Elastic Image Slideshow with Thumbnail Preview

Elastic Image Slideshow with Thumbnail Preview

26、Flux Slider

Flux Slider

27、jQuery Timelinr

jQuery Timelinr

28、AVIASLIDER – jQuery Slideshow

AVIASLIDER – jQuery Slideshow

29、unoslider

unoslider

30、FANCY TRANSITIONS EFFECTS

FANCY TRANSITIONS EFFECTS

31、A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

A Beautiful Apple-style Slideshow Gallery With CSS and jQuery

32、The Piece Maker Plugin

The Piece Maker Plugin

33、Apple Slide Show Rotator Effect

Apple Slide Show Rotator Effect

34、Rhinoslider

Rhinoslider

35、Rotating Image Slider with jQuery

Rotating Image Slider with jQuery

36、Making a Really Cool jQuery Gallery

Making a Really Cool jQuery Gallery

37、SIDEWAYS – JQUERY FULLSCREEN IMAGE GALLERY

SIDEWAYS – JQUERY FULLSCREEN IMAGE GALLERY

38、liteAccordian

liteAccordian

39、gSlider

gSlider

40、Hover Slide Effect

Hover Slide Effect

41、SLIDER GALLERY WITH JQUERY

SLIDER GALLERY WITH JQUERY

42、CoverScroll jQuery plugin

CoverScroll jQuery plugin

43、ALL IN ONE JQUERY ROTATOR – CONTENT SLIDER

ALL IN ONE JQUERY ROTATOR – CONTENT SLIDER

44、Sliding Gallery

Sliding Gallery

45、Polaroid Photo Viewer

Polaroid Photo Viewer

46、PARALLAX SLIDER WITH JQUERY

PARALLAX SLIDER WITH JQUERY

47、ELEGANT ACCORDION WITH JQUERY AND CSS3

ELEGANT ACCORDION WITH JQUERY AND CSS3

48、Sliding Stacked Images With JQuery

Sliding Stacked Images With JQuery

49、Image Flow 0.9

Image Flow 0.9

50、iCarousel

iCarousel

51、3D Gallery with CSS3 and jQuery

3D Gallery with CSS3 and jQuery

52、INTERACTIVE PHOTO DESK WITH JQUERY AND CSS3

INTERACTIVE PHOTO DESK WITH JQUERY AND CSS3

53、WAVE DISPLAY EFFECT WITH JQUERY

WAVE DISPLAY EFFECT WITH JQUERY

54、Carou Fredsel

Carou Fredsel

55、Presentation Cycle

Presentation Cycle

56、Shutter Effect Portfolio with jQuery and Canvas

Shutter Effect Portfolio with jQuery and Canvas

57、Slider.js

Slider.js

58、WOW SLIDER

WOW SLIDER

59、cool carousels

cool carousels

60、Coffee Script

Coffee Script

61、jQuery Accordion Image Slider

jQuery Accordion Image Slider

62、JQuery Based Flipped Image Gallery with Bounce Effects

JQuery Based Flipped Image Gallery with Bounce Effects

63、Boutique Carousel

Boutique Carousel

64、jQuery Image Gallery

jQuery Image Gallery

65、GRID NAVIGATION EFFECTS WITH JQUERY

GRID NAVIGATION EFFECTS WITH JQUERY

66、CU3ER Image Slider

CU3ER Image Slider

67、Menucool Slider

Menucool Slider

68、Bxslider

Bxslider

69、JC Play List

JC Play List

70、RoyalSlider

RoyalSlider

71、Roundabout jQuery Slider

Roundabout jQuery Slider

72、Adipoli

Adipoli

73、FULLSCREEN GALLERY WITH THUMBNAIL FLIP

FULLSCREEN GALLERY WITH THUMBNAIL FLIP

上面收集了70多种不同类型的效果,当然还有其他更好的效果,只是我没有发现。另外上面的很多效果中使用了CSS3特性,如果您要运用上面的某个到您的项目中,最好在使用前先进行浏览器兼容测试,要是您的js水平好的话,那就不用后怕,(^_^)。如果您那有其他类似效果的教程或者demo,欢迎在下面的评论中与我们一起分享

如需转载,烦请注明出处:http://www.w3cplus.com/source/72-jQuery-slider-show.html

返回顶部