JavaScript Resimli Manşet Slayt eklentisi

Bugün sizlerle daha önce paylastığım Jquery Otomatik resim slayt galerisi ve Jquery slider manşet eklentisi yazılarımdan farklı olarak JavaScript versiyon resimli manşet slayt eklentisini paylaşacağım.
Ziyaretçilerinizi resimlerinizle dikkatini çekmek için kullanabileceğiniz Resimli Manşet Slayt eklentisi JavaScript versiyonu. Haber siteleri tarafından da kullanılan bu slayt manşet eklentisini sizde bloglarınız da kullanabilirsiniz. Resimleri ve linkleri değiştirip sürekli güncelleyebilir ve istediğiniz konuların tanıtımını yapabilirsiniz. Resimler sırayla altında kısa notlarla slayt olarak akar ve Jquery kullanılmadığı için blogu yavaşlatmaz.

Örnek Slayt

Bu slaytı blogunuza eklemek için:

1. Blogger Kumanda Panelinize gidin.
2. Yerleşim tıklayın.
3. Üst Bilginin altındaki yere Gadget/Widget Ekle,
4. HTML / JavaScript seçeneğini seçin.
5. Aşağıdaki kodu isteğinize göre ayarlayarak, kopyalayın ve yapıştırın.

<style type="text/css">
#sliderFrame{position:relative;width:532px;max-width: 100%;border:5px solid #000;margin:0 auto;}
#slider{width:532px;height:300px;max-width: 100%;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCkRvnHYuekrxxn1K1Ncc-Sb1wTA9yUuuR5ujwlPUBWy_lg4zVLa8RgmCnhbYZymr-TLqVUWSTSH2kk8vfUeypkLf8IpVY17YAD3EuFwtRJ8xxaSERZW97hKVMb0lpSXxcs1f-C4DMyw1V/s1600/loading.gif) no-repeat 50% 50%;position:relative;box-shadow:0 1px 5px #999;transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);margin:0 auto;}
#slider img{position:absolute;border:none;display:none;}
#slider a.imgLink{z-index:2;display:none;position:absolute;top:0;left:0;border:0;width:100%;height:100%;margin:0;padding:0;}
div.mc-caption-bg,div.mc-caption-bg2{position:absolute;width:100%;height:auto;left:0;bottom:0;z-index:3;overflow:hidden;font-size:0;padding:0;}
div.mc-caption-bg{background-color:#000;}
div.mc-caption{font:bold 14px/20px Arial;color:#EEE;z-index:4;text-align:center;padding:10px 0;}
div.mc-caption a{color:#FB0;}
div.mc-caption a:hover{color:#DA0;}
div.navBulletsWrapper{top:310px;left:32%;right:32%;width:150px;background:none;padding-left:20px;position:relative;z-index:5;cursor:pointer;}
div.navBulletsWrapper div{width:11px;height:11px;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7WNGmff9MQBQbNjGpZJKWF8sgt15ty0JnXrCKn8m4fMXsJloMGeOxKYU305bw8aiNAtZ0q-yyI_f-eVMLGjdGiQBH-3bqRM5W-DgTr2evanQvZM7VoVUX8vBD6-B2IVOUqXcEBV9rAIg/s22/bullet.png) no-repeat 0 0;float:left;overflow:hidden;vertical-align:middle;cursor:pointer;margin-right:11px;position:relative;}
div.navBulletsWrapper div.active{background-position:0 -11px;}
</style>
<script type='text/javascript'>
var sliderOptions=
{
sliderId: "slider",
effect: "series1",
effectRandom: false,
pauseTime: 3000, // Resimlerin geçiş hızı (3000 = 3 Saniye, 1000 = 1 Saniye...)
transitionTime: 600,
slices: 12,
boxes: 8,
hoverPause: true,
autoAdvance: true,
captionOpacity: 0.3,
captionEffect: "fade",
thumbnailsWrapperId: "thumbs",
license: "l91b"
};
var imageSlider=new mcImgSlider(sliderOptions); function mcImgSlider(m){function Q(){var a;c.l&&(a=document.getElementById(c.l));if(a){a=a.childNodes;for(var b=0;b<a.length;b++)"thumb"==a[b].className&&v.push(a[b])}if(a=v.length){for(;a--;)v[a].on=0,v[a].i=a,v[a].onclick=function(){t.y(this.i)},v[a].onmouseover=function(){this.on=1;this.className="thumb thumb-on"},v[a].onmouseout=function(){this.on=0;this.className=this.i==d.a?"thumb thumb-on":"thumb"};L(0)}}function L(a){var b=v.length;if(b)for(;b--;)v[b].className=b!=a&&0==v[b].on?"thumb":"thumb thumb-on"} function R(a){for(var b=[],e=a.length;e--;)b.push(String.fromCharCode(a[e]));return b.join("")}var J=function(a){a=a.childNodes;var b=[];if(a)for(var e=0,c=a.length;e<c;e++)1==a[e].nodeType&&b.push(a[e]);return b},E=function(a,b){a&&(a.o=b,a.style.opacity=b,a.style.filter="alpha(opacity="+100*b+")")},T=document,M=function(a,b,e){return e?a.substring(b,e):a.substring(b)},y=function(){this.d=[];this.b=null;this.c()},U=9>function(){var a=50,b=navigator.userAgent,e;-1!=(e=b.indexOf("MSIE "))&&(a=parseInt(b.substring(e+ 5,b.indexOf(".",e))));return a}();y.a={f:function(a){return-Math.cos(a*Math.PI)/2+.5},g:function(a){return a},h:function(a,b){return Math.pow(a,2*b)},j:function(a,b){return 1-Math.pow(1-a,2*b)}};y.prototype={k:{c:m.transitionTime,a:function(){},b:y.a.f,d:1},c:function(){for(var a=["webkit","moz","ms","o"],b=0;b<a.length&&!window.requestAnimationFrame;++b)window.requestAnimationFrame=window[a[b]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[a[b]+"CancelAnimationFrame"]||window[a[b]+"CancelRequestAnimationFrame"]; this.supportAnimationFrame=!!window.requestAnimationFrame},m:function(a,b,e,c){var d=[];e-=b;for(var f=Math.ceil(60*c.c/1E3),g,h=1;h<=f;h++)g=b+c.b(h/f,c.d)*e,"opacity"!=a&&(g=Math.round(g)),d.push(g);d.index=0;return d},n:function(){null==this.b&&this.p()},p:function(){this.q();var a=this;this.b=this.supportAnimationFrame?window.requestAnimationFrame(function(){a.p()}):window.setInterval(function(){a.q()},15)},q:function(){var a=this.d.length;if(a){for(var b=0;b<a;b++)this.o(this.d[b]);for(;a--;)b= this.d[a],b.d.index==b.d.length&&(b.c(),this.d.splice(a,1))}else this.supportAnimationFrame?window.cancelAnimationFrame(this.b):window.clearInterval(this.b),this.b=null},o:function(a){if(a.d.index<a.d.length){var b=a.b,e=a.d[a.d.index];"opacity"==a.b?U&&(b="filter",e="alpha(opacity="+Math.round(100*e)+")"):e+="px";a.a.style[b]=e;a.d.index++}},r:function(a,b,e,c,d){d=this.s(this.k,d);e=this.m(b,e,c,d);this.d.push({a:a,b:b,d:e,c:d.a});this.n()},s:function(a,b){b=b||{};var e,c={};for(e in a)c[e]=void 0!== b[e]?b[e]:a[e];return c}};var k=new y,d={a:0,e:"",d:0,c:0,b:0},c,h,u,w,H,C,F,n,p,I,z,q,A,B,x,G,r,t=null,N=function(a){c.a="series1"==a?[6,8,15,2,5,14,13,3,7,4,14,1,13,15]:"series2"==a?[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]:a.split(/\W+/);c.a.p=m.effectRandom?-1:1==c.a.length?0:1},O=function(){c={b:m.pauseTime,c:m.transitionTime,f:m.slices,g:m.boxes,O0:m.license,h:m.hoverPause,i:m.autoAdvance,j:m.captionOpacity,k:"none"==m.captionEffect?0:"fade"==m.captionEffect?1:2,l:m.thumbnailsWrapperId,Ob:function(){"undefined"!== typeof beforeSlideChange&&beforeSlideChange(arguments)},Oa:function(){"undefined"!==typeof afterSlideChange&&afterSlideChange(arguments)}};h&&(c.m=Math.ceil(h.offsetHeight*c.g/h.offsetWidth));N(m.effect);c.n=function(){var a;-1==c.a.p?a=c.a[Math.floor(Math.random()*c.a.length)]:(a=c.a[c.a.p],c.a.p++,c.a.p>=c.a.length&&(c.a.p=0));if(1>a||17<a)a=15;return a}},v=[],V=function(a){var b=document.getElementById(a);b&&(b.b=function(a){return-1<b.innerHTML.indexOf(a)});return b},K=function(a,b,e,c,d,f,g){setTimeout(function(){if(b&& e==b-1){var g={a:function(){t.o()}},h;for(h in a)g[h]=a[h]}else g=a;void 0!==d.width&&k.r(c,"width",d.width,f.width,a);void 0!==d.height&&k.r(c,"height",d.height,f.height,a);k.r(c,"opacity",d.opacity,f.opacity,g)},g)},P=function(a){h=a;this.b=0;this.c()},D=function(a){var b=document.createElement("div");b.className=a;return b};P.prototype={c:function(){u=h.offsetWidth;w=h.offsetHeight;r=J(h);for(var a=r.length;a--;){var b=r[a],e=null;if("IMG"!=b.nodeName){if("A"==b.nodeName){e=b;e.style.display="none"; e.className="imgLink"+(e.className?" "+e.className:"");var S=this.z(e),l=e.getAttribute("href");S&&"undefined"!=typeof McVideo&&l&&-1!=l.indexOf("http")&&(e.onclick=function(){return"true"==this.getAttribute("autoPlayVideo")?!1:t.d(this)},McVideo.register(e,this))}b=b.getElementsByTagName("img")[0]}b.style.display="none";d.d++}c.m=Math.ceil(w*c.g/u);d.e="IMG"==r[d.a].nodeName?r[d.a]:r[d.a].getElementsByTagName("img")[0];"A"==r[d.a].nodeName&&(r[d.a].style.display="block");h.style.background='url("'+ d.e.getAttribute("src")+'") no-repeat';this.i();H=this.k();this.m();var f=this.v(),a=d.e.parentNode;this.z(a)&&"true"==a.getAttribute("autoPlayVideo")?this.d(a):c.i&&1<d.d&&(x=setTimeout(function(){f.y(f.n(1))},c.b));c.h&&(h.onmouseover=function(){2!=d.b&&(d.b=1,clearTimeout(x),x=null)},h.onmouseout=function(){2!=d.b&&(d.b=0,null==x&&!d.c&&c.i&&(x=setTimeout(function(){f.y(f.n(d.a+1))},c.b/2)))})},d:function(a){McVideo.play(a,u,w)&&(d.b=2);return!this.b},f:function(){G=D("navBulletsWrapper");for(var a= [],b=0;b<d.d;b++)a.push("<div rel='"+b+"'></div>");G.innerHTML=a.join("");a=J(G);for(b=0;b<a.length;b++)b==d.a&&(a[b].className="active"),a[b].onclick=function(){t.y(parseInt(this.getAttribute("rel")))};h.appendChild(G)},g:function(){for(var a=J(G),b=d.d;b--;)a[b].className=b==d.a?"active":"","A"==r[b].nodeName&&(r[b].style.display=b==d.a?"block":"none")},h:function(a){var b=function(a){a=a.charCodeAt(0).toString();return M(a,a.length-1)};a=a.split("");return a[1]+b(a[0])+(2==a.length?"":b(a[2]))}, i:function(){C=D("mc-caption");F=D("mc-caption");n=D("mc-caption-bg");E(n,0);n.appendChild(F);p=D("mc-caption-bg2");p.appendChild(C);E(p,0);p.style.visibility=n.style.visibility=F.style.visibility="hidden";h.appendChild(n);h.appendChild(p);I=[n.offsetLeft,n.offsetTop,C.offsetWidth];C.style.width=F.style.width=C.offsetWidth+"px";this.j()},j:function(){2==c.k?(z=A={opacity:0,width:0,marginLeft:Math.round(I[2]/2)},q={opacity:1,width:I[2],marginLeft:0},B={opacity:c.j,width:I[2],marginLeft:0}):1==c.k? (z=A={opacity:0},q={opacity:1},B={opacity:c.j}):(z=q={},B=A={})},k:function(){var a=d.e.getAttribute("alt");a&&"#"==a.substr(0,1)&&(a=(a=document.getElementById(a.substring(1)))?a.innerHTML:"");this.l();return a},l:function(){if(1<C.innerHTML.length){var a={c:c.b/4.5,b:1==c.k?y.a.f:y.a.h,d:1==c.k?0:3,a:function(){n.style.visibility=p.style.visibility="hidden"}};c.k||(a.c=a.c=10);void 0!==q.marginLeft&&(k.r(p,"width",q.width,z.width,a),k.r(n,"width",B.width,A.width,a),k.r(p,"marginLeft",q.marginLeft, z.marginLeft,a),k.r(n,"marginLeft",B.marginLeft,A.marginLeft,a));void 0!==q.opacity&&(k.r(p,"opacity",q.opacity,z.opacity,a),k.r(n,"opacity",B.opacity,A.opacity,a))}},m:function(){if(F.innerHTML=C.innerHTML=H){n.style.visibility=p.style.visibility="visible";var a={c:c.k?c.b/3:10,b:1==c.k?y.a.f:y.a.j,d:1==c.k?0:3};void 0!==q.marginLeft&&(k.r(p,"width",z.width,q.width,a),k.r(n,"width",A.width,B.width,a),k.r(p,"marginLeft",z.marginLeft,q.marginLeft,a),k.r(n,"marginLeft",A.marginLeft,B.marginLeft,a)); void 0!==q.opacity&&(k.r(p,"opacity",z.opacity,q.opacity,a),k.r(n,"opacity",A.opacity,B.opacity,a))}},a:function(a){return a.replace(/(?:.*\.)?(\w)([\w\-])?[^.]*(\w)\.[^.]*$/,"$1$3$2")},o:function(){d.c=0;clearTimeout(x);x=null;this.m();h.style.background='url("'+d.e.getAttribute("src")+'") no-repeat';var a=this,b=d.e.parentNode;this.z(b)&&"true"==b.getAttribute("autoPlayVideo")?this.d(b):!d.b&&c.i&&(x=setTimeout(function(){a.y(a.n(d.a+1))},c.b));c.Oa.call(this,d.a,d.e)},p:function(){d.c=1;d.e="IMG"== r[d.a].nodeName?r[d.a]:r[d.a].getElementsByTagName("img")[0];this.g();H=this.k();var a=h.getElementsByTagName("div");for(i=a.length;i--;)"mcSlc"!=a[i].className&&"mcBox"!=a[i].className||delete h.removeChild(a[i]);a=c.n();c.Ob.apply(this,[d.a,d.e,H,a]);L(d.a);var b=14>a?this.w(a):this.x();9>a||15==a?a%2&&(b=b.reverse()):14>a&&(b=b[0]);9>a?this.q(b,a):13>a?this.r(b,a):13==a?this.s(b):16>a?this.t(b,a):this.u(b,a)},q:function(a,b){for(var e=0,c=7>b?{height:0,opacity:-.4}:{width:0,opacity:0},d={height:w, opacity:1},f=0,g=a.length;f<g;f++)3>b?a[f].style.bottom="0":5>b?a[f].style.top="0":7>b?(a[f].style[f%2?"bottom":"top"]="0",c.opacity=-.2):(d={width:a[f].offsetWidth,opacity:1},a[f].style.width=a[f].style.top="0",a[f].style.height=w+"px"),K({},g,f,a[f],c,d,e),e+=50},r:function(a,b){a.style.width=11>b?"0px":u+"px";a.style.height=11>b?w+"px":"0px";E(a,1);11>b&&(a.style.top="0");9==b?(a.style.left="auto",a.style.right="0px"):10<b&&(a.style[11==b?"bottom":"top"]="0");if(11>b)var e=0,d=u;else e=0,d=w;k.r(a, 11>b?"width":"height",e,d,{b:y.a.j,c:2*c.c,a:function(){t.o()}})},s:function(a){a.style.top="0";a.style.width=u+"px";a.style.height=w+"px";k.r(a,"opacity",0,1,{c:2*c.c,a:function(){t.o()}})},t:function(a){for(var b=timeBuff=0,e=colIndex=0,d=[[]],l=0,f=a.length;l<f;l++)a[l].style.width=a[l].style.height="0px",d[e][colIndex]=a[l],colIndex++,colIndex==c.g&&(e++,colIndex=0,d[e]=[]);e={c:c.c/1.3};l=0;for(f=2*c.g;l<f;l++){for(var g=l,h=0;h<c.m;h++){if(0<=g&&g<c.g){var k=d[h][g];K(e,a.length,b,k,{width:0, height:0,opacity:0},{width:k.w,height:k.h,opacity:1},timeBuff);b++}g--}timeBuff+=100}},u:function(a,b){for(var e=a,c,d,f=e.length;f;c=parseInt(Math.random()*f),d=e[--f],e[f]=e[c],e[c]=d);a=e;c=e=0;for(d=a.length;c<d;c++){f=a[c];if(16==b){a[c].style.width=a[c].style.height="0px";var g={width:0,height:0,opacity:0},h={width:f.w,height:f.h,opacity:1}}else g={opacity:0},h={opacity:1};K({},a.length,c,f,g,h,e);e+=20}},v:function(){return(new Function("a","b","c","d","e","f","g","h","this.f();var l=e(g(b([110,105,97,109,111,100])));if(l==''||l.length>3||(f(l).length==2?a[b([48,79])].indexOf(f(l))>-1:a[b([48,79])]==f(l)+'b')){d();this.b=1;}else{a[b([97,79])]=a[b([98,79])]=function(){};var k=c(b([115,105,99,109]));if (k && k.getAttribute(b([102,101,114,104]))) var x = k.getAttribute(b([102,101,114,104]));if (x && x.length > 20) var y = h(x, 17, 19) == 'ol';if(!(y&&(k.b('en') || k.b('li')))){a.a=[6];a.a.p=0;}};return this;")).apply(this, [c,R,V,Q,this.a,this.h,function(a){return T[a]},M])},w:function(a){for(var b=[],e=8<a?u:Math.round(u/c.f),k=8<a?1:c.f,l=0;l<k;l++){var f=D("mcSlc"),g=f.style;g.left=e*l+"px";g.width=(l==c.f-1?u-e*l:e)+"px";g.height="0px";g.background='url("'+d.e.getAttribute("src")+'") no-repeat -'+l*e+"px 0%";10==a?g.background='url("'+d.e.getAttribute("src")+'") no-repeat right top':12==a&&(g.background='url("'+d.e.getAttribute("src")+'") no-repeat left bottom');g.zIndex=1;g.position="absolute";E(f,0);h.appendChild(f); b.push(f)}return b},x:function(){for(var a=[],b=Math.round(u/c.g),e=Math.round(w/c.m),k=0;k<c.m;k++)for(var l=0;l<c.g;l++){var f=D("mcBox"),g=f.style;g.left=b*l+"px";g.top=e*k+"px";f.w=l==c.g-1?u-b*l:b;f.h=k==c.m-1?w-e*k:e;g.width=f.w+"px";g.height=f.h+"px";g.background='url("'+d.e.getAttribute("src")+'") no-repeat -'+l*b+"px -"+k*e+"px";g.zIndex=1;g.position="absolute";E(f,0);h.appendChild(f);a.push(f)}return a},y:function(a,b){if(d.c&&!b||a==d.a)return 0;if(2==d.b){d.b=0;var c=document.getElementById("mcVideo"); c.src="";delete c.parentNode.parentNode.removeChild(c.parentNode)}clearTimeout(x);x=null;d.a=this.n(a);this.p()},n:function(a){a>=d.d?a=0:0>a&&(a=d.d-1);return a},To:function(a){this.y(this.n(d.a+a))},z:function(a){return-1<a.className.indexOf(" video")}};O();(function(a,b,c){a.addEventListener?a.addEventListener(b,c,!1):a.attachEvent&&a.attachEvent("on"+b,c)})(window,"load",function(){var a=document.getElementById(m.sliderId);a&&(t=new P(a))});return{displaySlide:function(a,b){t.y(a,b)},next:function(){t.To(1)}, previous:function(){t.To(-1)},getAuto:function(){return c.i},switchAuto:function(){(c.i=!c.i)&&t.To(1)},setEffect:function(a){N(a)},changeOptions:function(a){for(var b in a)m[b]=a[b];O()},getElement:function(){return h}}};
</script>
<div id="sliderFrame">
<div id="slider">
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
<a href="#"><img src="RESİM URL" alt="BAŞLIK"/></a>
</div></div>

Kod içinde kırmızı ile belirtdiğim yerleri Resimlerinizin genişliğine-yüksekliğine göre ayarlayabilirsiniz.
<a href="Resme tıklayınca açılacak sayfanın adresi"><img src="Slaytta gösterilecek resmin adresi" alt="Resmin altında gözükecek yazı metni"/></a>
Kodu denemek ve ayarlarınızı yapmak için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...