LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Sliders / HTML-CSS-PHP-JavaScript / JavaScript Codes / Website / Website Sliders » Simple JavaScript Text + Image Slider For Blog And Website

Simple JavaScript Text + Image Slider For Blog And Website

Simple JavaScript Text + Image Slider For Blog And Website

As we have seen many of awesome and stylish sliders that are really coll while working but they have a lengthy code with heavy JQuery that often disturb your template and also increase your blog and website loading time so high so that visitor ger anger and leave your site or blog. Here I am not telling you to banned the use of slider but it is now important to show your hot post or article to your visitor with saving your space. Here I am telling you to use simple coded and easy sliders that can be customizable according to your template or are not heavy to increases your loading time. I see that many slider contain HTML, CSS, JavaScript And HTMl. As you know that the heaviest language code is JQuery so here is my slider in which Only JavaScript is available with short CSS as you want. It Did Not contain even HTML so you can imaging that how simple is this but first have a look on slider screenshot before proceeding. It didn’t contain as function as other heavy slider contains but it is unique.
The original code is provided by Dynamic Drive i just updated this with some extra code and your slider is ready to rock.


Features:
1.) You Can Add Unlimited Slides.
2.) There Are Text And Image In Every Slide.
3.) Easy To Install And Quick To Load.
4.)No JQuery Or HTML, Only CSS And JavaScript.
5.) Full Easy Customizable CSS And JavaScript.
6.) Smooth Fade Out Effect.
7.) ReadMore Button In Slides.
8.) Slide Title Space Available.
9.) (500px X 250px) Dimension Is Default, You Can Also Change It.

Simple JavaScript Text + Image Slider For Blog And Website

How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

<style type=”text/css”>
exesliderheading {font-size: 20px; font-style: oblique;}
.exepic {
float:left;
margin:0 20px 0 0;
padding:5px;
}
.exelink {
float:right;
}
</style>
<div style=”width: 500px; height: 250px; background-color: #efefef;”>
<script type=”text/javascript”>
/***********************************************
* Fading Scroller- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Upgraded By Muhammad Hassan © EXEIdeas International. Visit http://www.exeideas.com/ for full source code
***********************************************/
var delay = 2500; //set delay between message change (in miliseconds)
var maxsteps=30; // number of steps to take to change from start color to endcolor
var stepdelay=50; // time in miliseconds of a single step
//**Note: maxsteps*stepdelay will be total time in miliseconds of fading effect
var startcolor= new Array(255,255,255); // start color (red, green, blue)
var endcolor=new Array(0,0,0); // end color (red, green, blue)
var fcontent=new Array();
begintag='<div style=”font: normal; padding: 5px; background-color: #efefef;”>’; //set opening tag, such as font declarations

fcontent[0]='<img class=”exepic” height=”228″ width=”200″ src=”+++Your Image URL+++” /><exesliderheading>Slider 1 Heading:</exesliderheading></br>Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. Description Or Text For Slider 1 Here. <a class=”exelink” href=”##########” rel=”no-follow” >Read More…</a>’
fcontent[1]='<img class=”exepic” height=”228″ width=”200″ src=”+++Your Image URL+++” /><exesliderheading>Slider 2 Heading:</exesliderheading></br>Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. Description Or Text For Slider 2 Here. <a class=”exelink” href=”##########” rel=”no-follow” >Read More…</a>’
fcontent[2]='<img class=”exepic” height=”228″ width=”200″ src=”+++Your Image URL+++” /><exesliderheading>Slider 3 Heading:</exesliderheading></br>Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. Description Or Text For Slider 3 Here. <a class=”exelink” href=”##########” rel=”no-follow” >Read More…</a>’
fcontent[3]='<img class=”exepic” height=”228″ width=”200″ src=”+++Your Image URL+++” /><exesliderheading>Slider 4 Heading:</exesliderheading></br>Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. Description Or Text For Slider 4 Here. <a class=”exelink” href=”##########” rel=”no-follow” >Read More…</a>’
fcontent[4]='<img class=”exepic” height=”228″ width=”200″ src=”+++Your Image URL+++” /><exesliderheading>Slider 5 Heading:</exesliderheading></br>Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. Description Or Text For Slider 5 Here. <a class=”exelink” href=”##########” rel=”no-follow” >Read More…</a>’

closetag='</div>’;
var fwidth=’500px’; //set scroller width
var fheight=’250px’; //set scroller height
var fadelinks=1; //should links inside scroller content also fade like text? 0 for no, 1 for yes.
///No need to edit below this line/////////////////
var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;
/*Rafael Raposo edited function*/
//function to change content
function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById(“fscroller”).style.color=”rgb(“+startcolor[0]+”, “+startcolor[1]+”, “+startcolor[2]+”)”
document.getElementById(“fscroller”).innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}
// colorfade() partially by Marcio Galli for Netscape Communications. ////////////
// Modified by Dynamicdrive.com
function linkcolorchange(step){
var obj=document.getElementById(“fscroller”).getElementsByTagName(“A”);
if (obj.length>0){
for (i=0;i<obj.length;i++)
obj[i].style.color=getstepcolor(step);
}
}
/*Rafael Raposo edited function*/
var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
document.getElementById(“fscroller”).style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout(“colorfade(“+step+”)”,stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById(“fscroller”).style.color=”rgb(“+endcolor[0]+”, “+endcolor[1]+”, “+endcolor[2]+”)”;
setTimeout(“changecontent()”, delay);
}
}
/*Rafael Raposo’s new function*/
function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<3;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return (“rgb(” + newcolor[0] + “, ” + newcolor[1] + “, ” + newcolor[2] + “)”);
}
if (ie4||DOM2)
document.write(‘<div id=”fscroller” style=”width:’+fwidth+’;height:’+fheight+'”></div>’);
if (window.addEventListener)
window.addEventListener(“load”, changecontent, false)
else if (window.attachEvent)
window.attachEvent(“onload”, changecontent)
else if (document.getElementById)
window.onload=changecontent
</script>
</div>

Customization:
1.) Change Blue Text With Your URLs.
2.) Change Pink Color With Your Slide Title.
3.) Change Red Color With Your Desire Text.
4.) If You Want To Change Size, Dimension, Pixel, Fonts, Image Pixel, Text Dimension And Position Or Anything, Feel Free To Ask.
5.) Save And Done.

You Like It, Please Share This Recipe With Your Friends Using...

4 Responses to “Simple JavaScript Text + Image Slider For Blog And Website”

Leave a Reply

Your email address will not be published. Required fields are marked *