2016 January 31 Archive - EXEIdeas – Let's Your Mind Rock

JavaScript Sliders are now most used widgets in web or blog designing. JavaScript Sliders are used to show your most awesome and attractive daya on front page. There are many JavaScript Sliders are available over internet but here we have a simple and lite coded JavaScript Slider that also have fade effect so you give a best effect.So now there are many JavaScript Slider codes available over internet but many are heavy in load so they can effect SEO and page loading time so use our JavaScript Slider that is lifgt weight and no external codes. Use this JavaScript Slider to make your web attractive.CLICK HERE TO SEE DEMOFeatures:1.) No JQuery File Added.2.) Pure JavaScript Codes.3.) Pure CSS3 Added.4.) Simple And Fast Loading Code.5.) Can Work With Any Browser.How To Add In A WebPage?1.) Just Go To Your “Web Page File”.2.) Now “Copy” The Below Codes And “Paste” It To There Positions.3.) “Save” It, Now You Are Done.JavaScript: /*Better(?) Image cross fader (C)2004 Patrick H. Lauke aka reduxInspired by Steve at Slayeroffice http://slayeroffice.com/code/imageCrossFade/preInit "Scheduler" idea by Cameron Adams aka The Man in Bluehttp://www.themaninblue.com/writing/perspective/2004/09/29/Tweaked to deal with empty nodes 19 Feb 2006*//* general variables */var galleryId = 'gallery'; /* change this to the ID of the gallery list */var gallery; /* this will be the object reference to the list later on */var galleryImages; /* array that will hold all child elements of the list */var currentImage; /* keeps track of which image should currently be showing */var previousImage;var preInitTimer;preInit();/* functions */function preInit() {/* an inspired kludge that - in most cases - manages to initially hide the image gallery listbefore even onload is triggered (at which point it's normally too late, and the whole list alreadyappeared to the user before being remolded) */if ((document.getElementById)&&(gallery=document.getElementById(galleryId))) {gallery.style.visibility = "hidden";if (typeof preInitTimer != 'undefined') clearTimeout(preInitTimer); /* thanks to Steve Clay http://mrclay.org/ for this small Opera fix */} else {preInitTimer = setTimeout("preInit()",2);}}function fader(imageNumber,opacity) {/* helper function to deal specifically with images and the cross-browser differences in opacity handling */var obj=galleryImages[imageNumber];if (obj.style) {if (obj.style.MozOpacity!=null) {/* Mozilla's pre-CSS3 proprietary rule */obj.style.MozOpacity = (opacity/100) - .001;} else if (obj.style.opacity!=null) {/* CSS3 compatible */obj.style.opacity = (opacity/100) - .001;} else if (obj.style.filter!=null) {/* IE's proprietary filter */obj.style.filter = "alpha(opacity="+opacity+")";}}}function fadeInit() {if (document.getElementById) {preInit(); /* shouldn't be necessary, but IE can sometimes get ahead of itself and trigger fadeInit first */galleryImages = new Array;var node = gallery.firstChild;/* instead of using childNodes (which also gets empty nodes and messes up the script later)we do it the old-fashioned way and loop through the first child and its siblings */while (node) {if (node.nodeType==1) {galleryImages.push(node);}node = node.nextSibling;}for(i=0;i<galleryImages.length;i++) {/* loop through all these child nodes and set up their styles */galleryImages[i].style.position='absolute';galleryImages[i].style.top=0;galleryImages[i].style.zIndex=0;/* set their opacity to transparent */fader(i,0);}/* make the list visible again */gallery.style.visibility = 'visible';/* initialise a few parameters to get the cycle going */currentImage=0;previousImage=galleryImages.length-1;opacity=100;fader(currentImage,100);/* start the whole crossfade process after a second's pause */window.setTimeout("crossfade(100)", 1000);}}function crossfade(opacity) {if (opacity < 100) {/* current image not faded up fully yet...so increase its opacity */fader(currentImage,opacity);/* fader(previousImage,100-opacity); */opacity += 10;window.setTimeout("crossfade("+opacity+")", 30);} else {/* make the previous image - which is now covered by the current one fully - transparent */fader(previousImage,0);/* current image is now previous image, as we advance in the list of images */previousImage=currentImage;currentImage+=1;if (currentImage>=galleryImages.length) {/* start over from first image if we cycled through all images in the list */currentImage=0;}/* make sure the current image is on top of the previous one */galleryImages[previousImage].style.zIndex = 0;galleryImages[currentImage].style.zIndex = 100;/* and start the crossfade after a second's pause */opacity=0;window.setTimeout("crossfade("+opacity+")", 1000);}}/* initialise fader by hiding image object first */addEvent(window,'load',fadeInit)/* 3rd party helper functions *//* addEvent handler for IE and other browsers */function addEvent(elm, evType, fn, useCapture)// addEvent and removeEvent// cross-browser event handling for IE5+, NS6 and Mozilla// By Scott Andrew{if (elm.addEventListener){elm.addEventListener(evType, fn, useCapture);return true;} else if (elm.attachEvent){var r = elm.attachEvent("on"+evType, fn);return r;}} CSS: /* splintered basic styles version 2.0 *//* general styles */html { width: 100%; height: 100%; background: #fafaf8; margin: 0; padding: 0; font-size: 100%; /* IE trick */}body { width: 100%; height: 100%; margin: 0; padding: 0; font: 0.7em/1.3em Verdana, Helvetica, sans-serif;}h1,h2,h3,h4,h5,h6 { margin: 0 0 0.5em 0; padding: 0; font-size: 100%; }blockquote { margin:0.2em; padding: 0.2em; border: 1px #ddd solid;}code { font-size: 1.2em; display: block;overflow:auto;}code.inline { display:inline; }a, a:link { color: #333;}a:visited { color: #666;}a:focus, a:hover, a:active { color: #fff; background: #666;}a img { border: none; }ul { list-style: none; }body { padding: 25px; width: auto; height: auto;}#gallery { position: relative; width:500px; height:340px; margin:0; padding:0; }#gallery li { display: block; } HTML: Customization:1.) Edit Your HTML & CSS As Per Your Requirements. Rest JavaScript Is Ok For General Us. If You Are Pro, Then You Can Do Any Thing.Last Words:That’s all we have. If you have any problem with this code in your template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don’t forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article…