常用实用图片轮播效果jquery插件
轮播效果在页面中经常用到的比较普通的照片轮播效果插件:
创新互联是专业的商水网站建设公司,商水接单;提供成都网站建设、成都做网站,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行商水网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
1.Nivo Slider:一种最常见最普通的图片轮播效果。
Demo地址:http://dev7studios.com/nivo-slider/#/demos
2.Smooth Div Scroll:鼠标移动到左右键上面才开始轮播。
Demo地址: http://www.smoothdivscroll.com/
3.s3Slider jquery plugin:一款带图片介绍的轮播效果。
Demo地址:http://www.serie3.info/s3slider/demonstration.html
4.lightbox点击图片浏览大图
Demo地址:http://leandrovieira.com/projects/jquery/lightbox/#
5.带下拉条的轮播效果
Demo地址:http://jqueryfordesigners.com/demo/slider-gallery.html
6.带缩略图的左右点击浏览效果
Demo地址:http://tympanus.net/Tutorials/ResponsiveImageGallery/
7.Circular Content Carousel with jquery带查看详细信息的图片浏览效果
Demo地址:http://tympanus.net/Development/CircularContentCarousel/#
官方网址:http://tympanus.net/codrops/2011/08/16/circular-content-carousel/
源码分析:先上官网下载tympanus插件,加载该插件并设置参数
$(
'#ca-container'
).contentcarousel({
// speed for the sliding animation
sliderSpeed : 500,
// easing for the sliding animation
sliderEasing :
'easeOutExpo'
,
// speed for the item animation (open / close)
itemSpeed : 500,
// easing for the item animation (open / close)
itemEasing :
'easeOutExpo'
,
// number of items to scroll at a time
scroll : 1
});
html
<
div
id
=
"ca-container"
class
=
"ca-container"
>
<
div
class
=
"ca-wrapper"
>
<
div
class
=
"ca-item ca-item-1"
>
<
div
class
=
"ca-item-main"
>
<
div
class
=
"ca-icon"
>
div
>
<
h4
>Stop factory farming
h4
>
<
h5
>
<
span
class
=
"ca-quote"
>“
span
>
<
span
>Some text...
span
>
h5
>
<
a
href
=
"#"
class
=
"ca-more"
>more...
a
>
div
>
<
div
class
=
"ca-content-wrapper"
>
<
div
class
=
"ca-content"
>
<
h7
>Animals are not commodities
h7
>
<
a
href
=
"#"
class
=
"ca-close"
>close
a
>
<
div
class
=
"ca-content-text"
>
<
p
>Some more text...
p
>
div
>
<
ul
>
<
li
><
a
href
=
"#"
>Read more
a
>
li
>
<
li
><
a
href
=
"#"
>Share this
a
>
li
>
<
li
><
a
href
=
"#"
>Become a member
a
>
li
>
<
li
><
a
href
=
"#"
>Donate
a
>
li
>
ul
>
div
>
div
>
div
>
<
div
class
=
"ca-item ca-item-2"
>
...
div
>
...
div
>
div
>
8.skitte能查看缩略图的轮播效果
Demo地址:http://www.skitter-slider.net/
9.timelinr联动轮播
Demo地址:http://www.csslab.cl/2011/08/18/jquery-timelinr/
代码分析
首先需要下载jquery.timelinr-0.9.53.js插件
然后加载插件
$(function(){
$().timelinr();
});
在 $().timelinr();中设置插件参数
参数
orientation: 'horizontal',定位方向
// value: horizontal | vertical, default to horizontal
containerDiv: '#timeline',当前div的id
// value: any HTML tag or #id, default to #timeline
datesDiv: '#dates',时间div
// value: any HTML tag or #id, default to #dates
datesSelectedClass: 'selected',当前选中时间的样式
// value: any class, default to selected
datesSpeed: 'normal',轮播的速度
// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to normal
issuesDiv : '#issues',是否使用div
// value: any HTML tag or #id, default to #issues
issuesSelectedClass: 'selected',选择后是否使用选中样式
// value: any class, default to selected
issuesSpeed: 'fast',使用的速度
// value: integer between 100 and 1000 (recommended) or 'slow', 'normal' or 'fast'; default to fast
issuesTransparency: 0.2,使用遮罩层的透明度
// value: integer between 0 and 1 (recommended), default to 0.2
issuesTransparencySpeed: 500,使用遮罩层的速度
// value: integer between 100 and 1000 (recommended), default to 500 (normal)
prevButton: '#prev',上一页id
// value: any HTML tag or #id, default to #prev
nextButton: '#next',下一页id
// value: any HTML tag or #id, default to #next
arrowKeys: 'false',
// value: true/false, default to false
startAt: 1,开始参数
// value: integer, default to 1 (first)
autoPlay: 'false',是否允许自动轮播
// value: true | false, default to false
autoPlayDirection: 'forward',自动轮播方向
// value: forward | backward, default to forward
autoPlayPause: 2000 自动轮播间歇
// value: integer (1000 = 1 seg), default to 2000 (2segs)< });
Html代码
10.all in one jquery rotator-content slider基本上能满足网站首页轮播所有效果(该插件需要付费购买)
Demo地址:http://www.responsivejqueryslider.com/banner_rotator.html
本文题目:常用实用图片轮播效果jquery插件
URL网址:http://scyanting.com/article/pdegep.html