آموزش ساخت اسلایدشو

[دفاعی 872]

سلام

در این پست شما با یک روش برای ساخت اسلایدشو بدون استفاده از جی کوئری آشنا می شوید.

در ساخت این اسلاید شو فقط از جاوا اسکریپت استفاده شده است.

[align=RIGHT]ابتدا کد اچ تی ام ال زیر را در بین تگ های body قرار دهید :

[align=LEFT]

   <
ul
id
=
"fade-banner" 
class
=
"project"
>	    <
li
>		   <
img
src
="
[url=view-source:http://download2.ittutorial.ir/15-slideShowWithOut/3.jpg]3.jpg[/url]
" 
alt
=
"نام پروژه3" 
/

>		   <
h3
>			  نام پروژه3
h3
>		   <
p
>			  پروژه سه پروژه سه پروژه سه پروژه سه پروژه سه پروژه سه پروژه سه پروژه سه پروژه سه		   
p
>	    
li
>	    <
li
>		   <
img
src
="
[url=view-source:http://download2.ittutorial.ir/15-slideShowWithOut/2.jpg]2.jpg[/url]
" 
alt
=
"نام پروژه2" 
/

>		   <
h3
>			  نام پروژه2
h3
>		   <
p
>			  پروژه دو پروژه دو پروژه دو پروژه دو پروژه دو پروژه دو پروژه دو پروژه دو		   
p
>	    
li
>	    <
li
>		   <
img
src
="
[url=view-source:http://download2.ittutorial.ir/15-slideShowWithOut/1.jpg]1.jpg[/url]
" 
alt
=
"نام پروژه" 
/

>		   <
h3
>			  نام پروژه1
h3
>		   <
p
>			  پروژه یک پروژه یک پروژه یک پروژه یک پروژه یک پروژه یک پروژه یک پروژه یک		   
p
>	    
li
>	
ul
>	<
div
class
=
"numeric" 
id
=
"numeric"
>	
div
> 

[align=RIGHT]ul درواقع نگه دارنده اسلاید شو است و هر قسمت از اسلاید شو در li قرار می گیرد و در هر li میتواند عکس متن و یا ترکیبی از آن ها باشد. این قابلیت اسلاید شو است که میتواند شامل تصویر و یا متن و یا ترکیبی از آن باشد که نحوه قرار گیری آن ها باید با css تعریف شود.

تگ دایو در واقع شماره های اسلاید شو دربر می گیرد ، این شماره ها به طور داینامیک با تعداد li های موجود در ul بالایی پر خواهد شد . این تگ را هم می توانید با دادن استایل های متفاوت با ظاهر متفاوت و در جاهای متفاوتی قرار دهید .

این کد css اسلایدر است که می توانید به صورت داخلی بین تگ های style قرار دهید یا به صورت خارجی به آن لینک بدهید

[align=LEFT]

/*css reset*/form, html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td	    {		   margin: 0;		   padding: 0;		   border: 0;		   outline: 0;		   font-size: 100%;		   vertical-align: baseline;		   background: transparent;	    }	    ol, ul	    {		   list-style: none;	    }	    body	    {		   font-size: 12px;	    }	    /* end of css reset*/	    .project	    {		   margin: 23px auto 15px;		   width: 250px;		   position: relative;		   height: 320px;		   text-align: center;		   font-family: Tahoma;	    }	    .project li	    {		   width: 250px;		   position: absolute;		   height: 320px; /*equal with ul*/		   top: 0;		   right: 0;		   background-color: #e8e8e8;	    }	    .project li img	    {		   width: 250px;		   height: 160px;	    }	    .project li h3	    {		   font-size: 15px;		   margin: 12px 0;	    }	    .project li p	    {		   padding: 0 15px;		   line-height: 180%;	    }	    .numeric	    {		   direction: ltr;		   text-align: center;		   margin-bottom: 15px;		   font-size: 1.1em;		   padding: 5px 0;	    }	    .numeric li	    {		   display: inline-block;		   margin: 0 3px;		   padding: 1px 5px;		   background-color: #ededed;		   border: 1px solid #ccc;		   cursor: pointer;		   zoom: 1;		   display: inline;		   -moz-border-radius: 3px;		   -webkit-border-radius: 3px;		   border-radius: 3px;		   -moz-box-shadow: 1px 1px 1px #492b2b;		   -webkit-box-shadow: 1px 1px 1px #492b2b;		   box-shadow: 1px 1px 1px #492b2b;	    }	    .numeric li.current	    {		   background-color: #000;		   color: #fff;		   cursor: text;		   border: 1px solid #000;	    }

[align=RIGHT]اندازه های موجود در این کدها را می توانید به دلخواه خود تغییر دهید.

این هم کد جاوا اسکرپیت که می توانید مانند کد css به صورت داخلی یا خارجی آن را قرار دهید

[align=LEFT]

<
script
type
=
"text/javascript"
>	    window.onload = function() {		   slideshow();	    };		function $1(id) {		   return document.getElementById(id);	    }	    function $2(tName, id) {		   return document.getElementById(id).getElementsByTagName(tName);	    }	    function $3(tName) {		   return document.getElementsByTagName(tName);	    }		  //slidshow	    var myLi, myNumDiv, myNumUl, myNumLi, curElement, nextElement, slideShow, opcval, opcval2, ff;	    opcval = 1;	    opcval2 = 0;	    function slideshow() {		   myLi = $2('li', 'fade-banner');		   myNumDiv = $1('numeric');		    myNumUl = document.createElement('ul');		   myNumDiv.appendChild(myNumUl);		    for (i = 0; i < myLi.length; i++) {			  myNumUl.innerHTML += "" + (i + 1) + "";		   }		    myNumLi = $2('li', 'numeric');		    myNumLi[0].className = "current";		    for (i = 0; i < myNumLi.length; i++) {			  myNumLi[i].onclick = new Function("decision('" + i + "')");		   }		    curElement = Number(myLi.length - 1);		   nextElement = Number(myLi.length - 2);		   for (i = 0; i < myLi.length - 1; i++) {			  opac(myLi[i], 0);			  myLi[i].style.zIndex = "1";		   }		   opac(myLi[myLi.length - 1], 1);		   myLi[myLi.length - 1].style.zIndex = "2";		    slideShow = setInterval('fade()', 5000);	    }	    function fade() {		    myNumLi[((myLi.length - 1) - curElement)].className = "";		   myNumLi[((myLi.length - 1) - nextElement)].className = "current";		    var c = setInterval(function() {			  gonextimage();			  if (opcval <= 0) {				 fixedposition();				 clearInterval(c);				 if (curElement == 0) { curElement = myLi.length - 1; } else { curElement = curElement - 1; }				 if (nextElement == 0) { nextElement = myLi.length - 1; } else { nextElement = nextElement - 1; }			  }		   }, 20);	    }	    function decision(i) {		   if (opcval == 1 && ((myLi.length - 1) - i) != curElement) {			  clearInterval(slideShow);			  nextElement = (myLi.length - 1) - i;			  myNumLi[((myLi.length - 1) - curElement)].className = "";			  myNumLi[i].className = "current";			  ff = setInterval(function() {				 gonextimage();				 if (opcval <= 0) {					fixedposition();					clearInterval(ff);					curElement = nextElement;				 }			  }, 20);		   }	    }	    function gonextimage() {		   opac(myLi[curElement], opcval);		   opac(myLi[nextElement], opcval2);		   opcval = opcval - 0.05;		   opcval2 = opcval2 + 0.05;	    }	    function fixedposition() {		   opac(myLi[curElement], 0);		   myLi[curElement].style.zIndex = "1";		   opac(myLi[nextElement], 1);		   myLi[nextElement].style.zIndex = "2";		   opcval = 1;		   opcval2 = 0;	    }	    function opac(obj, value) {		   obj.style.opacity = value;		   obj.style.MozOpacity = value;		   obj.style.KhtmlOpacity = value;		   obj.style.filter = "alpha(opacity=" + (value * 100) + ")";	    }	 
script
>

[align=RIGHT]امیدوارم براتون مفید باشه

دموی نهایی اسلایدر

موفق باشید[/align][/align][/align][/align][/align][/align][/align]

[Saeed_Shamsi 758]

با سلام

ممنون از زحمتی که کشیدید .

اگه میتونستید یه دمو یا اسکرین شات از نتیجه کار بزارید خوبتر هم مسشد .

یا حق

[دفاعی 872]

جناب شمسی فرمایش شما صحیح

ببخشید فراموش کردم

تاپیک ویرایش و دموی نهایی درج گردید