emj365/jsbin.ovisoz.css

## jsbin.ovisoz.css
.emj-banner {
  overflow: hidden;
  position: relative;
}
.emj-banner a {
  top: 0;
  left: 0;
  position: absolute;
}

## jsbin.ovisoz.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="emj-banner">
    <img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" />
  </div>
</body>
</html>

## jsbin.ovisoz.js
// images to roll
var imgs = new Array(
  {
    imgPath: 'http://farm9.staticflickr.com/8513/8369295781_8d4302060c.jpg',
    imgUrl: 'http://baidu.com'
  },
  {
    imgPath: "http://farm9.staticflickr.com/8043/8370362598_85b882106a.jpg",
    imgUrl: "http://weibo.com"
  },
  {
    imgPath: "http://farm9.staticflickr.com/8507/8370372026_17ceea2b8c.jpg",
    imgUrl: "http://google.com"
  }
);


// example for initialize a rolling banner
$(document).ready(function() {
  emjBanner1 = $('.emj-banner').emjBanner({
    'width': 500,
    'height': 150,
    'imgs': imgs,
    'delay': 2000,
    'speed': 500
  });
});


//emjBanner jqueryPlugin below, don't edit it if you konw what you do.
$.fn.emjBanner = function(params) {
  this.imgs = params.imgs;
  this.delay = params.delay;
  this.speed = params.speed;
  if ( ! this.imgs || ! this.delay || ! this.speed) {
    return false;
  }


  if (params.width) {
    this.css('width', params.width);
  }
  if (params.height) {
    this.css('height', params.height);
  }

  this.init = function(container, bgImgObj, frontImgObj) {
    container.children().remove();
    var bgImg = $("<img />");
    bgImg.attr('src', bgImgObj.imgPath);
    var frontImg = $("<img />");
    frontImg.attr('src', frontImgObj.imgPath);
    var link = $("<a />");
    link.css('width', container.width());
    link.css('height', container.height());
    container.append(bgImg);
    link.append(frontImg);
    container.append(link);
    return {bgImg: bgImg, frontImg: frontImg, link: link};
  };

  var handle = this.init(this, this.imgs[1], this.imgs[0]);
  this.bgImg = handle.bgImg;
  this.frontImg = handle.frontImg;
  this.link = handle.link;
  this.step = 0;

  this.playNext = function(handle) {
    handle.step++;
    if (handle.step == handle.imgs.length) {
      handle.step = 0;
    }

    handle.frontImg.fadeOut(handle.speed, function() {
      handle.frontImg.attr('src', handle.imgs[handle.step].imgPath);
      handle.link.attr('href', handle.imgs[handle.step].imgUrl);
      handle.frontImg.show();
      if (handle.step + 1 == handle.imgs.length) {
        handle.bgImg.attr('src', handle.imgs[0].imgPath);
      } else {
        handle.bgImg.attr('src', handle.imgs[handle.step + 1].imgPath);
      }
      setTimeout(function() {
        handle.playNext(handle);
      }, handle.delay);
    });
  };

  this.playNext(this);
  return this;
};
	.emj-banner {
	overflow: hidden;
	position: relative;
	}
	.emj-banner a {
	top: 0;
	left: 0;
	position: absolute;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[add your bin description]" />
	<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div class="emj-banner">
	<img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" />
	</div>
	</body>
	</html>
	// images to roll
	var imgs = new Array(
	{
	imgPath: 'http://farm9.staticflickr.com/8513/8369295781_8d4302060c.jpg',
	imgUrl: 'http://baidu.com'
	},
	{
	imgPath: "http://farm9.staticflickr.com/8043/8370362598_85b882106a.jpg",
	imgUrl: "http://weibo.com"
	},
	{
	imgPath: "http://farm9.staticflickr.com/8507/8370372026_17ceea2b8c.jpg",
	imgUrl: "http://google.com"
	}
	);



	// example for initialize a rolling banner
	$(document).ready(function() {
	emjBanner1 = $('.emj-banner').emjBanner({
	'width': 500,
	'height': 150,
	'imgs': imgs,
	'delay': 2000,
	'speed': 500
	});
	});



	//emjBanner jqueryPlugin below, don't edit it if you konw what you do.
	$.fn.emjBanner = function(params) {
	this.imgs = params.imgs;
	this.delay = params.delay;
	this.speed = params.speed;
	if ( ! this.imgs \|\| ! this.delay \|\| ! this.speed) {
	return false;
	}


	if (params.width) {
	this.css('width', params.width);
	}
	if (params.height) {
	this.css('height', params.height);
	}

	this.init = function(container, bgImgObj, frontImgObj) {
	container.children().remove();
	var bgImg = $("<img />");
	bgImg.attr('src', bgImgObj.imgPath);
	var frontImg = $("<img />");
	frontImg.attr('src', frontImgObj.imgPath);
	var link = $("<a />");
	link.css('width', container.width());
	link.css('height', container.height());
	container.append(bgImg);
	link.append(frontImg);
	container.append(link);
	return {bgImg: bgImg, frontImg: frontImg, link: link};
	};

	var handle = this.init(this, this.imgs[1], this.imgs[0]);
	this.bgImg = handle.bgImg;
	this.frontImg = handle.frontImg;
	this.link = handle.link;
	this.step = 0;

	this.playNext = function(handle) {
	handle.step++;
	if (handle.step == handle.imgs.length) {
	handle.step = 0;
	}

	handle.frontImg.fadeOut(handle.speed, function() {
	handle.frontImg.attr('src', handle.imgs[handle.step].imgPath);
	handle.link.attr('href', handle.imgs[handle.step].imgUrl);
	handle.frontImg.show();
	if (handle.step + 1 == handle.imgs.length) {
	handle.bgImg.attr('src', handle.imgs[0].imgPath);
	} else {
	handle.bgImg.attr('src', handle.imgs[handle.step + 1].imgPath);
	}
	setTimeout(function() {
	handle.playNext(handle);
	}, handle.delay);
	});
	};

	this.playNext(this);
	return this;
	};