jquery带进度条的焦点图片特效插件

带进度条的焦点图片特效jquery插件,图片作成很大时看上去可以实现全屏的效果,进度条上还带有一个小图标跟随焦点滑动,不像普通的焦点图特效只是当前的焦点的样式与其他的不一样而已没有特别之处,而这个小图标的动画大大提高了这个特效的可观赏性。我就是被这个效果所吸引的,再去花时候从网上把它整理出来的。

下面让我们来看看它有哪些参数可以设置,由于全是英文的,水平不怎么样只能理解个大概,具体功能只有试过才知道了。

jquery带进度条的焦点图片特效插件

 


preload: false, // boolean, 设置为true时图片优先加载
		preloadImage: '/templates/images/loading.gif', // 图片载入时loading图片地址
		container: 'slides_container', // string, 容器ID名
		generateNextPrev: false, // 生成上一页与下一页按钮
		next: 'next', // string, 下一页class样式名
		prev: 'prev', // string, 上一页按钮class样式名
pagination: true, // boolean, If you're not using pagination you can set to false, but don't have to
		generatePagination: true, // boolean, Auto generate pagination
		prependPagination: false, // boolean, prepend pagination
		paginationClass: 'pagination', // string, Class name for pagination
		currentClass: 'current', // string, 当前焦点的classname
		fadeSpeed: 350, // number, 切换的速度值
		fadeEasing: 'swing', // string, 
		slideSpeed: 350, // number, Set the speed of the sliding animation in milliseconds
		slideEasing: '', // string, 
		start: 1, // number, Set the speed of the sliding animation in milliseconds
		effect: 'slide', // string, '[next/prev], [pagination]', e.g. 'slide, fade' or simply 'fade' for both
		crossfade: false, // boolean, Crossfade images in a image based slideshow
		randomize: false, // boolean, Set to true to randomize slides
		play: 0, // number, 自动播放时间间隔
		pause: 0, // number, Pause slideshow on click of next/prev or pagination. A positive number will set to true and be the time of pause in milliseconds
		hoverPause: false, // boolean, 鼠标经过时是否暂停
		autoHeight: false, // boolean, Set to true to auto adjust height
		autoHeightSpeed: 350, // number, Set auto height animation time in milliseconds
		bigTarget: false, // boolean, Set to true and the whole slide will link to next slide on click
		animationStart: function(){}, // Function called at the start of animation
		animationComplete: function(){}, // Function called at the completion of animation
		slidesLoaded: function() {} // Function is called when slides is fully loaded


对主要的参数我都作了中文的说明,其他一些都不常用,有兴趣的朋友可以去试试。这效果真的很不错。

你可能感兴趣的:(图片特效,焦点图)