jQuery.imageChanger.jsDEMO

$("[data-role='rollover']").imageChanger({
  transition: false
});

$("[data-role='rollover']").imageChanger({
  transition: "fade"
  // or
  // transition: {type: "fade", ...some options}
});

$("[data-role='rollover']").imageChanger({
  transition: "wink"
  // 
  // transition: {type: "wink", ...some options}
});

$("[data-role='rollover']").imageChanger({
  transition: {type: "slide", "direction": "top"}
});

$("[data-role='rollover']").imageChanger({
  transition: {type: "slide", "direction": "bottom"}
});

$("[data-role='rollover']").imageChanger({
  transition: {type: "slide", "direction": "left"}
});

$("[data-role='rollover']").imageChanger({
  transition: {type: "slide", "direction": "right"}
});

$("[data-role='rollover']").imageChanger({
  // some options...
  backgroundImage: true
});

<p id="api-sample"><img src="images/face03.jpg" alt="image"></p>
<div>
  <button id="control-toggle" type="button" class="btn">toggle()</button>
  <button id="control-active" type="button" class="btn">onImage()</button>
  <button id="control-default" type="button" class="btn">offImage()</button>
</div>

//  In the sample to disable the `hover` option.
var $apiSample = $("#api-sample").imageChanger({hover: false});

// Get the ImageChanger instance.
var ic = $apiSample.data("imageChanger");

// on -> off
// or
// off -> on
$("#control-toggle").on("click", function(){
  ic.toggle();
  return false;
});

// off -> on
$("#control-active").on("click", function(){
  ic.onImage();
  return false;
});

// on -> off
$("#control-default").on("click", function(){
  ic.offImage();
  return false;
});