当前位置：首页 > 网页特效 > 幻灯片和轮播图

带进度条的jQuery轮播图

分类：幻灯片和轮播图日期：2024-05-14 点击(3) 评论(0)

带进度条的jQuery轮播图

简介

这个漂亮的特效包含三个部分，每个部分包含三个图像、一个标题和一个分页。在查看完某个部分的最后一个图像后，滑块似乎会滑动到下一个部分，显示新的标题和图片。标题后面有一个微妙的计时器，显示下一张幻灯片放映前还有多少时间.
##### js代码
```javascript
$(function() {

var $imgs = $('#images .carousel'),

$capt = $('#captions .carousel'),

$timr = $('#timer');

$imgs.carouFredSel({

circular: false,

scroll: {

easing: 'quadratic',

duration: 2,

timeoutDuration: 3000,

onBefore: function(data) {

$capt.trigger('slideTo', ['.' + data.items.visible.first().attr('alt')]);

$timr.stop().animate({

opacity: 0

}, data.scroll.duration);

onAfter: function() {

$timr.stop().animate({

opacity: 1

}, 150);

}

auto: {

progress: '#timer'

pagination: {

container: '.pager',

anchorBuilder: function(i) {

return '<a class="p' + i + '" href="#"></a>';

}

});

$capt.carouFredSel({

circular: false,

auto: false,

scroll: {

easing: 'quadratic',

duration: 2

}

});

});
```

web299.com

带进度条的jQuery轮播图

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果