Demo:

Các làm:

Bước 1: Đặt code sau vào nơi bạn muốn hiển thị trình chạy ảnh (Index_body là lựa chọn tốt nhất nhé )

Code:

<div style="width:700px;margin:40px auto;"><div class="slider-wrapper theme-default"><div class="ribbon"></div><div id="nivoslider-125" class="nivoSlider" style="width:700px;height:300px;"><img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/nemo83-700x300.png" alt=""/><img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/slider65-700x300.png" title="#nivoslider-125-caption-0" alt=""/><img src="http://nivo.dev7studios.com/wp-content/uploads/2011/08/walle12-700x300.png" alt=""/></div></div><div id="nivoslider-125-caption-0" class="nivo-html-caption">You can add captions too…</div><p><script type="text/javascript">jQuery(window).load(function(){jQuery("#nivoslider-125").nivoSlider({effect:"random",slices:15,boxCols:8,boxRows:4,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:true,keyboardNav:true,pauseOnHover:true,manualAdvance:false});});</script></div>


P/s trong code trên có sử dụng 3 hình mẫu là:
http://nivo.dev7studios.com/wp-content/uploads/2011/08/nemo83-700x300.png
http://nivo.dev7studios.com/wp-content/uploads/2011/08/slider65-700x300.png
http://nivo.dev7studios.com/wp-content/uploads/2011/08/walle12-700x300.png
Và độ phân giải ảnh là 700x300 nhé.

Bước2: Tạo js mới (Không hướng dẫn cụ thể các bước tạo nhé)
Title*: Trình chạy ảnh-VietFm
Placement : In the home page.
Javascript Code * : Chèn code sau vào:

Code:

(function(d){var c=function(F,E){var D=d.extend({},d.fn.nivoSlider.defaults,E);var C={currentSlide:0,currentImage:"",totalSlides:0,running:false,paused:false,stop:false};var B=d(F);B.data("nivo:vars",C);B.css("position","relative");B.addClass("nivoSlider");var A=B.children();A.each(function(){var e=d(this);var i="";if(!e.is("img")){if(e.is("a")){e.addClass("nivo-imageLink");i=e}e=e.find("img:first")}var h=e.width();if(h==0){h=e.attr("width")}var f=e.height();if(f==0){f=e.attr("height")}if(h>B.width()){B.width(h)}if(f>B.height()){B.height(f)}if(i!=""){i.css("display","none")}e.css("display","none");C.totalSlides++});if(D.randomStart){D.startSlide=Math.floor(Math.random()*C.totalSlides)}if(D.startSlide>0){if(D.startSlide>=C.totalSlides){D.startSlide=C.totalSlides-1}C.currentSlide=D.startSlide}if(d(A[C.currentSlide]).is("img")){C.currentImage=d(A[C.currentSlide])}else{C.currentImage=d(A[C.currentSlide]).find("img:first")}if(d(A[C.currentSlide]).is("a")){d(A[C.currentSlide]).css("display","block")}B.css("background",'url("'+C.currentImage.attr("src")+'") no-repeat');B.append(d('<div class="nivo-caption"><p></p></div>').css({display:"none",opacity:D.captionOpacity}));var z=function(e){var g=d(".nivo-caption",B);if(C.currentImage.attr("title")!=""&&C.currentImage.attr("title")!=undefined){var f=C.currentImage.attr("title");if(f.substr(0,1)=="#"){f=d(f).html()}if(g.css("display")=="block"){g.find("p").stop().fadeOut(e.animSpeed,function(){d(this).html(f);d(this).stop().fadeIn(e.animSpeed)})}else{g.find("p").html(f)}g.stop().fadeIn(e.animSpeed)}else{g.stop().fadeOut(e.animSpeed)}};z(D);var y=0;if(!D.manualAdvance&&A.length>1){y=setInterval(function(){s(B,A,D,false)},D.pauseTime)}if(D.directionNav){B.append('<div class="nivo-directionNav"><a class="nivo-prevNav">'+D.prevText+'</a><a class="nivo-nextNav">'+D.nextText+"</a></div>");if(D.directionNavHide){d(".nivo-directionNav",B).hide();B.hover(function(){d(".nivo-directionNav",B).show()},function(){d(".nivo-directionNav",B).hide()})}d("a.nivo-prevNav",B).live("click",function(){if(C.running){return false}clearInterval(y);y="";C.currentSlide-=2;s(B,A,D,"prev")});d("a.nivo-nextNav",B).live("click",function(){if(C.running){return false}clearInterval(y);y="";s(B,A,D,"next")})}if(D.controlNav){var x=d('<div class="nivo-controlNav"></div>');B.append(x);for(var w=0;w<A.length;w++){if(D.controlNavThumbs){var v=A.eq(w);if(!v.is("img")){v=v.find("img:first")}if(D.controlNavThumbsFromRel){x.append('<a class="nivo-control" rel="'+w+'"><img src="'+v.attr("rel")+'" alt="" /></a>')}else{x.append('<a class="nivo-control" rel="'+w+'"><img src="'+v.attr("src").replace(D.controlNavThumbsSearch,D.controlNavThumbsReplace)+'" alt="" /></a>')}}else{x.append('<a class="nivo-control" rel="'+w+'">'+(w+1)+"</a>")}}d(".nivo-controlNav a:eq("+C.currentSlide+")",B).addClass("active");d(".nivo-controlNav a",B).live("click",function(){if(C.running){return false}if(d(this).hasClass("active")){return false}clearInterval(y);y="";B.css("background",'url("'+C.currentImage.attr("src")+'") no-repeat');C.currentSlide=d(this).attr("rel")-1;s(B,A,D,"control")})}if(D.keyboardNav){d(window).keypress(function(b){if(b.keyCode=="37"){if(C.running){return false}clearInterval(y);y="";C.currentSlide-=2;s(B,A,D,"prev")}if(b.keyCode=="39"){if(C.running){return false}clearInterval(y);y="";s(B,A,D,"next")}})}if(D.pauseOnHover){B.hover(function(){C.paused=true;clearInterval(y);y=""},function(){C.paused=false;if(y==""&&!D.manualAdvance){y=setInterval(function(){s(B,A,D,false)},D.pauseTime)}})}B.bind("nivo:animFinished",function(){C.running=false;d(A).each(function(){if(d(this).is("a")){d(this).css("display","none")}});if(d(A[C.currentSlide]).is("a")){d(A[C.currentSlide]).css("display","block")}if(y==""&&!C.paused&&!D.manualAdvance){y=setInterval(function(){s(B,A,D,false)},D.pauseTime)}D.afterChange.call(this)});var u=function(g,k,j){for(var i=0;i<k.slices;i++){var h=Math.round(g.width()/k.slices);if(i==k.slices-1){g.append(d('<div class="nivo-slice"></div>').css({left:h*i+"px",width:g.width()-h*i+"px",height:"0px",opacity:"0",background:'url("'+j.currentImage.attr("src")+'") no-repeat -'+(h+i*h-h)+"px 0%"}))}else{g.append(d('<div class="nivo-slice"></div>').css({left:h*i+"px",width:h+"px",height:"0px",opacity:"0",background:'url("'+j.currentImage.attr("src")+'") no-repeat -'+(h+i*h-h)+"px 0%"}))}}};var t=function(i,o,n){var m=Math.round(i.width()/o.boxCols);var l=Math.round(i.height()/o.boxRows);for(var k=0;k<o.boxRows;k++){for(var j=0;j<o.boxCols;j++){if(j==o.boxCols-1){i.append(d('<div class="nivo-box"></div>').css({opacity:0,left:m*j+"px",top:l*k+"px",width:i.width()-m*j+"px",height:l+"px",background:'url("'+n.currentImage.attr("src")+'") no-repeat -'+(m+j*m-m)+"px -"+(l+k*l-l)+"px"}))}else{i.append(d('<div class="nivo-box"></div>').css({opacity:0,left:m*j+"px",top:l*k+"px",width:m+"px",height:l+"px",background:'url("'+n.currentImage.attr("src")+'") no-repeat -'+(m+j*m-m)+"px -"+(l+k*l-l)+"px"}))}}}};var s=function(V,U,T,S){var R=V.data("nivo:vars");if(R&&R.currentSlide==R.totalSlides-1){T.lastSlide.call(this)}if((!R||R.stop)&&!S){return false}T.beforeChange.call(this);if(!S){V.css("background",'url("'+R.currentImage.attr("src")+'") no-repeat')}else{if(S=="prev"){V.css("background",'url("'+R.currentImage.attr("src")+'") no-repeat')}if(S=="next"){V.css("background",'url("'+R.currentImage.attr("src")+'") no-repeat')}}R.currentSlide++;if(R.currentSlide==R.totalSlides){R.currentSlide=0;T.slideshowEnd.call(this)}if(R.currentSlide<0){R.currentSlide=R.totalSlides-1}if(d(U[R.currentSlide]).is("img")){R.currentImage=d(U[R.currentSlide])}else{R.currentImage=d(U[R.currentSlide]).find("img:first")}if(T.controlNav){d(".nivo-controlNav a",V).removeClass("active");d(".nivo-controlNav a:eq("+R.currentSlide+")",V).addClass("active")}z(T);d(".nivo-slice",V).remove();d(".nivo-box",V).remove();var Q=T.effect;if(T.effect=="random"){var P=new Array("sliceDownRight","sliceDownLeft","sliceUpRight","sliceUpLeft","sliceUpDown","sliceUpDownLeft","fold","fade","boxRandom","boxRain","boxRainReverse","boxRainGrow","boxRainGrowReverse");Q=P[Math.floor(Math.random()*(P.length+1))];if(Q==undefined){Q="fade"}}if(T.effect.indexOf(",")!=-1){var P=T.effect.split(",");Q=P[Math.floor(Math.random()*P.length)];if(Q==undefined){Q="fade"}}if(R.currentImage.attr("data-transition")){Q=R.currentImage.attr("data-transition")}R.running=true;if(Q=="sliceDown"||Q=="sliceDownRight"||Q=="sliceDownLeft"){u(V,T,R);var O=0;var N=0;var M=d(".nivo-slice",V);if(Q=="sliceDownLeft"){M=d(".nivo-slice",V)._reverse()}M.each(function(){var b=d(this);b.css({top:"0px"});if(N==T.slices-1){setTimeout(function(){b.animate({height:"100%",opacity:"1.0"},T.animSpeed,"",function(){V.trigger("nivo:animFinished")})},100+O)}else{setTimeout(function(){b.animate({height:"100%",opacity:"1.0"},T.animSpeed)},100+O)}O+=50;N++})}else{if(Q=="sliceUp"||Q=="sliceUpRight"||Q=="sliceUpLeft"){u(V,T,R);var O=0;var N=0;var M=d(".nivo-slice",V);if(Q=="sliceUpLeft"){M=d(".nivo-slice",V)._reverse()}M.each(function(){var b=d(this);b.css({bottom:"0px"});if(N==T.slices-1){setTimeout(function(){b.animate({height:"100%",opacity:"1.0"},T.animSpeed,"",function(){V.trigger("nivo:animFinished")})},100+O)}else{setTimeout(function(){b.animate({height:"100%",opacity:"1.0"},T.animSpeed)},100+O)}O+=50;N++})}else{if(Q=="sliceUpDown"||Q=="sliceUpDownRight"||Q=="sliceUpDownLeft"){u(V,T,R);var O=0;var N=0;var L=0;var M=d(".nivo-slice",V);if(Q=="sliceUpDownLeft"){M=d(".nivo-slice",V)._reverse()}M.each(function(){var b=d(this);if(N==0){b.css("top","0px");N++}else{b.css("bottom","0px");N=0}if(L==T.slices-1){setTimeout(function(){b.animate({height:"100%",opacity:"1.0"},T.animSpeed,"",function(){V.trigger("nivo:animFinished")})},100+O)}else{setTimeout(function(){b.animate({height:"100%",opacity:"1.0"},T.animSpeed)},100+O)}O+=50;L++})}else{if(Q=="fold"){u(V,T,R);var O=0;var N=0;d(".nivo-slice",V).each(function(){var f=d(this);var b=f.width();f.css({top:"0px",height:"100%",width:"0px"});if(N==T.slices-1){setTimeout(function(){f.animate({width:b,opacity:"1.0"},T.animSpeed,"",function(){V.trigger("nivo:animFinished")})},100+O)}else{setTimeout(function(){f.animate({width:b,opacity:"1.0"},T.animSpeed)},100+O)}O+=50;N++})}else{if(Q=="fade"){u(V,T,R);var K=d(".nivo-slice:first",V);K.css({height:"100%",width:V.width()+"px"});K.animate({opacity:"1.0"},T.animSpeed*2,"",function(){V.trigger("nivo:animFinished")})}else{if(Q=="slideInRight"){u(V,T,R);var K=d(".nivo-slice:first",V);K.css({height:"100%",width:"0px",opacity:"1"});K.animate({width:V.width()+"px"},T.animSpeed*2,"",function(){V.trigger("nivo:animFinished")})}else{if(Q=="slideInLeft"){u(V,T,R);var K=d(".nivo-slice:first",V);K.css({height:"100%",width:"0px",opacity:"1",left:"",right:"0px"});K.animate({width:V.width()+"px"},T.animSpeed*2,"",function(){K.css({left:"0px",right:""});V.trigger("nivo:animFinished")})}else{if(Q=="boxRandom"){t(V,T,R);var J=T.boxCols*T.boxRows;var N=0;var O=0;var I=r(d(".nivo-box",V));I.each(function(){var b=d(this);if(N==J-1){setTimeout(function(){b.animate({opacity:"1"},T.animSpeed,"",function(){V.trigger("nivo:animFinished")})},100+O)}else{setTimeout(function(){b.animate({opacity:"1"},T.animSpeed)},100+O)}O+=20;N++})}else{if(Q=="boxRain"||Q=="boxRainReverse"||Q=="boxRainGrow"||Q=="boxRainGrowReverse"){t(V,T,R);var J=T.boxCols*T.boxRows;var N=0;var O=0;var H=0;var G=0;var p=new Array;p[H]=new Array;var I=d(".nivo-box",V);if(Q=="boxRainReverse"||Q=="boxRainGrowReverse"){I=d(".nivo-box",V)._reverse()}I.each(function(){p[H][G]=d(this);G++;if(G==T.boxCols){H++;G=0;p[H]=new Array}});for(var n=0;n<T.boxCols*2;n++){var m=n;for(var h=0;h<T.boxRows;h++){if(m>=0&&m<T.boxCols){(function(Z,Y,X,W,q){var o=d(p[Z][Y]);var g=o.width();var b=o.height();if(Q=="boxRainGrow"||Q=="boxRainGrowReverse"){o.width(0).height(0)}if(W==q-1){setTimeout(function(){o.animate({opacity:"1",width:g,height:b},T.animSpeed/1.3,"",function(){V.trigger("nivo:animFinished")})},100+X)}else{setTimeout(function(){o.animate({opacity:"1",width:g,height:b},T.animSpeed/1.3)},100+X)}})(h,m,O,N,J);N++}m--}O+=100}}}}}}}}}}};var r=function(f){for(var e,h,g=f.length;g;e=parseInt(Math.random()*g),h=f[--g],f[g]=f[e],f[e]=h){}return f};var a=function(b){if(this.console&&typeof console.log!="undefined"){console.log(b)}};this.stop=function(){if(!d(F).data("nivo:vars").stop){d(F).data("nivo:vars").stop=true;a("Stop Slider")}};this.start=function(){if(d(F).data("nivo:vars").stop){d(F).data("nivo:vars").stop=false;a("Start Slider")}};D.afterLoad.call(this);return this};d.fn.nivoSlider=function(a){return this.each(function(j,i){var h=d(this);if(h.data("nivoslider")){return h.data("nivoslider")}var b=new c(this,a);h.data("nivoslider",b)})};d.fn.nivoSlider.defaults={effect:"random",slices:15,boxCols:8,boxRows:4,animSpeed:500,pauseTime:3000,startSlide:0,directionNav:true,directionNavHide:true,controlNav:true,controlNavThumbs:false,controlNavThumbsFromRel:false,controlNavThumbsSearch:".jpg",controlNavThumbsReplace:"_thumb.jpg",keyboardNav:true,pauseOnHover:true,manualAdvance:false,captionOpacity:0.8,prevText:"Prev",nextText:"Next",randomStart:false,beforeChange:function(){},afterChange:function(){},slideshowEnd:function(){},lastSlide:function(){},afterLoad:function(){}};d.fn._reverse=[].reverse})(jQuery);

Bước 3: Thêm vào css:

xem