EasyFader – 轻量级的响应式幻灯片插件

HTML

<div id="Fader" class="fader">
  <img class="slide" src="slide1.jpg"/>
  <img class="slide" src="slide2.jpg"/>
  <img class="slide" src="slide3.jpg"/>
    <div class="fader_controls">
      <div class="page prev" data-target="prev">‹</div>
      <div class="page next" data-target="next">›</div>
      <ul class="pager_list"></ul>
    </div>
</div>

CSS

body{
  font-family: "futura", arial;
}

.fader{
    position: relative;
    padding-top: 60%;
    overflow: hidden;
} 
 
.fader .slide{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 1;
    opacity: 0;
}
 
.fader img.slide{
    height: auto;
}

.fader .prev,
.fader .next{
  position: absolute;
  height: 80px;
  line-height: 55px;
  width: 50px;
  font-size: 100px;
  text-align: center;
  color: #fff;
  top: 50%;
  left: 0;
  z-index: 4;
  margin-top: -25px;
  cursor: pointer;
  opacity: .7;
  transition: all 150ms;
}

.fader .prev:hover,
.fader .next:hover{
  opacity: 1;
}

.fader .next{
  left: auto;
  right: 0;
}

.fader .pager_list{
  position: absolute;
  width: 100%;
  height: 40px;
  line-height: 40px;
  bottom: 0;
  text-align: center;
  z-index: 4;
}

.fader .pager_list li{
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 7px;
  background: #fff;
  opacity: .7;
  text-indent: -999px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 150ms;
}

.fader .pager_list li:hover,
.fader .pager_list li.active{
  opacity: 1;
}

JS

(function($){
	function prefix(el){
		var prefixes = ["Webkit", "Moz", "O", "ms"];
		for (var i = 0; i < prefixes.length; i++){
			if (prefixes[i] + "Transition" in el.style){
				return '-'+prefixes[i].toLowerCase()+'-'; 
			};
		}; 
		return "transition" in el.style ? "" : false;
	};
	var methods = {
		init: function(settings){
			return this.each(function(){
				var config = {
					slideDur: 7000,
					fadeDur: 800
				};
				if(settings){
					$.extend(config, settings);
				};
				this.config = config;
				var $container = $(this),
					slideSelector = '.slide',
					fading = false,
					slideTimer,
					activeSlide,
					newSlide,
					$slides = $container.find(slideSelector),
					totalSlides = $slides.length,
					$pagerList = $container.find('.pager_list');
					prefix = prefix($container[0]);
				function animateSlides(activeNdx, newNdx){
					function cleanUp(){
						$slides.eq(activeNdx).removeAttr('style');
						activeSlide = newNdx;
						fading = false;
						waitForNext();
					};
					if(fading || activeNdx == newNdx){
						return false;
					};
					fading = true;
					$pagers.removeClass('active').eq(newSlide).addClass('active');
					$slides.eq(activeNdx).css('z-index', 3);
					$slides.eq(newNdx).css({
						'z-index': 2,
						'opacity': 1
					});
					if(!prefix){
						$slides.eq(activeNdx).animate({'opacity': 0}, config.fadeDur,
						function(){
							cleanUp();
						});
					} else {
						var styles = {};
						styles[prefix+'transition'] = 'opacity '+config.fadeDur+'ms';
						styles['opacity'] = 0;
						$slides.eq(activeNdx).css(styles);
						var fadeTimer = setTimeout(function(){
							cleanUp();
						},config.fadeDur);
					};
				};
				function changeSlides(target){
					if(target == 'next'){
						newSlide = activeSlide + 1;
						if(newSlide > totalSlides - 1){
							newSlide = 0;
						}
					} else if(target == 'prev'){
						newSlide = activeSlide - 1;
						if(newSlide < 0){
							newSlide = totalSlides - 1;
						};
					} else {
						newSlide = target;
					};
					animateSlides(activeSlide, newSlide);
				};
				function waitForNext(){
					slideTimer = setTimeout(function(){
						changeSlides('next');
					},config.slideDur);
				};
				for(var i = 0; i < totalSlides; i++){
					$pagerList
						.append('<li class="page" data-target="'+i+'">'+i+'');
				};
				$container.find('.page').bind('click',function(){
					var target = $(this).attr('data-target');
					clearTimeout(slideTimer);
					changeSlides(target);
				});
				var $pagers = $pagerList.find('.page');
				$slides.eq(0).css('opacity', 1);
				$pagers.eq(0).addClass('active');
				activeSlide = 0;
				waitForNext();
			});
		}
	};
	$.fn.easyFader = function(settings){
		  return methods.init.apply(this, arguments);
	};
})(jQuery);

调用

$(function(){
  $('#Fader').easyFader({
    slideDur: 6000,
    fadeDur: 800
  });
});