jQuery焦点图插件edslider特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery焦点图插件edslider特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery焦点图插件edslider</title>
<link rel="stylesheet" href="css/edslider.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/animate-custom.css">

</head>
<body>
<div class="container">
	<ul class="mySlideshow">
		<li class="first">
			<a href="#" target="_blank" class="animated fadeInLeft">
				<img src="images/hd-logo.png" width="330" height="255" alt="Harley-Davidson">
			</a>
			<div class="animated fadeInRight">It's time to ride!</div>
		</li>
		<li class="second">
			<img src="images/second-title.png" class="animated fadeInRight">
		</li>
		<li class="third">
			<img src="images/third-title.png" class="animated fadeInLeft">
		</li>
		<li class="fourth">
			<img src="images/fourth-title.png" class="animated fadeInRight">
		</li>
		<li class="fifth">
			<img src="images/fifth-title.png" class="animated fadeInLeft">
		</li>
	</ul>
</div>

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery.edslider.js"></script>
<script>
	$(document).ready(function(){
		//Call plugin
		$('.mySlideshow').edslider({
			width : '100%',
			height: 500
		});
	});
</script>
</body>
</html>

JS代码(jquery.edslider.js):

/* * jQuery edSlider plugin v.1.4 * @author Eduardo Moreno * Code under MIT License */
(function($){
	$.fn.edslider = function(settings){
	var defaults ={
	width:960,height:400,position:1,interval:5000,duration:500,animation:true,paginator:true,navigator:true,progress:true,loadImgSrc:'images/load.gif',skin:'edslider'}
;
	var options = $.extend({
}
,defaults,settings);
	this.each(function(){
	//Building (wrapping,validating,setting up)var slider = $(this),sliderLi = slider.find('li'),sliderBgImg = sliderLi.css('background-image');
	sliderLi.length == 0 && console.error('error:empty slider!');
	var sliderImg = slider.find('img'),wrapper = slider.wrap('<div class="' + options.skin + '"/>').parent().css({
	'width':options.width,'background-image':'url("' + options.loadImgSrc + '")','background-repeat':'no-repeat','background-position':'center'}
),startPosition = options.position;
	if(options.position == 0 || options.position > sliderLi.length){
	console.error('error:start position value must be between 1 and ' + sliderLi.length + '!');
	startPosition = 1;
}
slider.on('mouseenter',function(){
	$(this).addClass('hover');
	hoverControl();
}
).on('mouseleave',function(){
	$(this).removeClass('hover');
	hoverControl();
}
).add(sliderLi).css('height',options.height);
	sliderLi.css('width',options.width).filter(':nth-child(' + startPosition + ')').addClass('current');
	//Controls (navigation,pagination and progress bar)var position,controls,paginator,paginatorLi,progress,progressWidth,progressElapsed,interact = false;
	if((options.navigator || options.paginator) && sliderLi.length > 1){
	controls = wrapper.on('selectstart',false).append('<div class="controls" />').find('.controls');
	if(options.paginator){
	paginator = controls.prepend('<ul class="paginator"/>').find('.paginator').hide();
	sliderLi.each(function(){
	paginator.append('<li>&nbsp;
	</li>');
}
);
	paginatorLi = paginator.find('li').on('click',function(){
	if(interact){
	position = $(this).index();
	if((index - 1) != position){
	sliderLi.removeClass('current').filter(':nth-child(' + ++position + ')').addClass('current');
	play();
}
}
}
)}
if(options.navigator){
	controls.append('<div class="navigator prev"/><div class="navigator next"/>').find('.navigator').hide().on('click',function(){
	var btn = $(this);
	btn.hasClass('next') && interact && next();
	btn.hasClass('prev') && interact && prev();
}
);
}
}
progress = wrapper.prepend('<div class="progress"/>').find('.progress').width(0);
	!options.progress && progress.height(0);
	//Functions (init,play,next,prev,pause,resume)var timeLeft = options.interval,current,index,paused;
	function init(){
	progressResize();
	sliderLi.length > 1 ? play():sliderLi.fadeIn(options.duration);
}
function play(){
	progressReset();
	interact = false;
	current = sliderLi.filter('.current').siblings().fadeOut(options.animation && options.duration || 0).end().fadeIn(options.animation && options.duration || 0,function(){
	interval();
}
);
	$('.navigator').add('.paginator').fadeIn(options.animation && options.duration || 0);
	index = sliderLi.index(current) + 1;
	if(options.paginator){
	paginatorLi.removeClass('current').filter(':nth-child(' + index + ')').addClass('current');
}
}
function next(){
	sliderLi.removeClass('current');
	if(++index <= sliderLi.length){
	current.next().addClass('current')}
else{
	sliderLi.filter(':first-child').addClass('current');
}
play();
}
function prev(){
	sliderLi.removeClass('current');
	if(--index >= 1){
	current.prev().addClass('current')}
else{
	sliderLi.filter(':last-child').addClass('current');
}
play();
}
function pause(){
	paused = true;
	progressElapsed = progress.stop().width();
	timeLeft = (progressWidth - progressElapsed) * (options.interval / progressWidth);
}
function interval(){
	paused = false;
	interact = true;
	progress.stop().show().animate({
	width:'+=' + (progressWidth - progressElapsed)}
,timeLeft,'linear',function(){
	progressReset();
	next();
}
);
	hoverControl();
}
function progressReset(){
	progress.stop().width(0);
	progressElapsed = 0;
	timeLeft = options.interval;
}
function progressResize(){
	$(window).resize(function(){
	progressWidth = slider.width();
	pause();
	interval();
}
).resize();
}
function hoverControl(){
	if(interact){
	if(slider.hasClass('hover')){
	pause();
}
else if(paused){
	interval();
}
}
}
//Preloading images and initvar totalImgsUrl = [],preloadedImgs = 0;
	sliderLi.each(function(){
	sliderBgImg = $(this).css('background-image').replace(/.*\s?url\([\'\"]?/,'').replace(/[\'\"]?\).*/
,'');
	sliderBgImg != 'none' && totalImgsUrl.push(sliderBgImg);
}
);
	sliderImg.each(function(){
	totalImgsUrl.push(this.src);
}
);
	if(totalImgsUrl){
	$.each(totalImgsUrl,function(value){
	$('<img/>').hide().attr('src',totalImgsUrl[value]).on('load',function(){
	if(++preloadedImgs == totalImgsUrl.length){
	slider.css('background-image','none');
	init();
}
else{
	slider.css({
	'background-image':'url("' + options.loadImgSrc + '")','background-repeat':'no-repeat','background-position':'center'}
);
}
}
);
}
);
}
else{
	init();
}
}
);
}
}
)(jQuery);

CSS代码(styles.css):

body{margin:0;font-family:Arial,sans-serif;font-size:14px;background-color:#333;color:#fff;padding-top:30px;}
ul{margin:0;padding:0 0 20px 30px;}
.container{max-width:1200px;overflow:hidden;padding:20px;}
.container{margin:auto;}
.mySlideshow .animated{position:absolute;}
.first{background:url("../images/first.jpg") center no-repeat;}
.first a,.first img{display:block;}
.first a{top:80px;left:39%;margin-left:-165px;}
.first div{font-family:'Open Sans Condensed',sans-serif;font-size:50px;bottom:80px;left:39%;width:320px;text-align:center;margin-left:-160px;}
.second{background:url("../images/second.jpg") center no-repeat;}
.second img{top:160px;right:19%;}
.third{background:url("../images/third.jpg") center no-repeat;}
.third img{top:100px;left:23%;}
.fourth{background:url("../images/fourth.jpg") center no-repeat;}
.fourth img{top:320px;right:8%;}
.fifth{background:url("../images/fifth.jpg") center no-repeat;}
.fifth img{top:120px;left:21%;}

附件:下载该文件资源,减少时间成本(增值服务)