اضافة jquery auto playing

01‏/07‏/2010




اليوم لدينا موضوع بسيط سوف يسهل لزوارك استهلاك المعلومات بشكل أفظل

الموضوع  تم قرائته من هدا الموقع    Dream CSS
بحيث سوف يسهل بعرض مواضيعك على شكل صور  أنيقة و مميزة جدا


أتمنى أن يكون مفيد لك






كود الcss




*{

margin:0;

padding:0;

}

html{

height:100%;

}





a img{

border:0;

}

div.wrap{

width:540px;

margin:0 auto;

text-align:left;

}

div#top div#nav{

float:left;

clear:both;

width:540px;

height:52px;

margin:22px 0 0;

background:url url(http://3.bp.blogspot.com/_dCwtUSPyF4g/TCycIW7fCzI/AAAAAAAAAUg/CxsU7DjTBJc/s1600/navbgq.png) 0 0 no-repeat;

}

div#top div#nav ul{

float:left;

width:700px;

height:52px;

list-style-type:none;

}

div#nav ul li{

float:left;

height:52px;

}

div#nav ul li a{

border:0;

height:52px;

display:block;

line-height:52px;

text-indent:-9999px;

}

div#header{

margin:-1px 0 0;

}

div#video-header{

height:683px;

margin:-1px 0 0;

}



div#header div#slide-holder{

z-index:40;

width:540px;

height:299px;

position:absolute;

}

div#header div#slide-holder div#slide-runner{

top:9px;

left:9px;

width:540px;

height:278px;

overflow:hidden;

position:absolute;

}

div#header div#slide-holder img{

margin:0;

display:none;

position:absolute;

}

div#header div#slide-holder div#slide-controls{

left:0;

bottom:228px;

width:540px;

height:46px;

display:none;

position:absolute;

background:url(http://2.bp.blogspot.com/_dCwtUSPyF4g/TCyfG8OYXqI/AAAAAAAAAUo/zYkubtp0f1E/s1600/slidebg.png) 0 0;

}

div#header div#slide-holder div#slide-controls p.text{

float:left;

color:#fff;

display:inline;

font-size:10px;

line-height:16px;

margin:15px 0 0 20px;

text-transform:uppercase;

}

div#header div#slide-holder div#slide-controls p#slide-nav{

float:right;

height:24px;

display:inline;

margin:11px 15px 0 0;

}

div#header div#slide-holder div#slide-controls p#slide-nav a{

float:left;

width:24px;

height:24px;

display:inline;

font-size:11px;

margin:0 5px 0 0;

line-height:24px;

font-weight:bold;

text-align:center;

text-decoration:none;

background-position:0 0;

background-repeat:no-repeat;

color:#fff;

}

div#header div#slide-holder div#slide-controls p#slide-nav a.on{

background-position:0 -24px;

}

div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(http://2.bp.blogspot.com/_dCwtUSPyF4g/TCyfcltNQqI/AAAAAAAAAUw/VpfbzTi17eM/s1600/sildenav.png);}

div#nav ul li a{background:url(images/nav.png) no-repeat;}




كود الjquery





<script src='http://bestblogtech.googlecode.com/files/jquery.js' type='text/javascript'/>

<script src='http://bestblogtech.googlecode.com/files/scripts.js' type='text/javascript'/>




الان ابحث عن هدا الكود





</body>





و ضع( اسفله أو فوقه) هدا الكود





<script type='text/javascript'>

if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"صور نادرة1","desc":"هنا شرح للصورة"},{"id":"slide-img-2","client":"صور نادرة2","desc":"هنا شرح للصورة"},{"id":"slide-img-3","client":"صور نادرة3","desc":"هنا شرح للصورة"},{"id":"slide-img-4","client":"صور نادرة4","desc":"هنا شرح للصورة"},{"id":"slide-img-5","client":"صور نادرة5","desc":"هنا شرح للصورة"},{"id":"slide-img-6","client":"صور نادرة6","desc":"هنا شرح للصورة"}];

</script>






أخيرا كود الHTML


<div id="header">

<div class="wrap">

<div id="slide-holder">

<div id="slide-runner">

<a href="http://blogspacetech.blogspot.com/"><img id="slide-img-1" src="http://www.crystalinks.com/nature.jpg" class="slide" alt="هنا عنوان الصورة" /></a>

<a href="http://blogspacetech.blogspot.com/"><img id="slide-img-2" src="http://img145.imageshack.us/img145/7564/naturephoto2.png" class="slide" alt="هنا عنوان الصورة" /></a>

<a href="http://blogspacetech.blogspot.com/"><img id="slide-img-3" src="http://img31.imageshack.us/img31/5550/naturephoto3.png" class="slide" alt="هنا عنوان الصورة" /></a>

<a href="http://blogspacetech.blogspot.com/"><img id="slide-img-4" src="http://img34.imageshack.us/img34/2006/naturephoto4.png" class="slide" alt="هنا عنوان الصورة" /></a>

<a href="http://blogspacetech.blogspot.com/"><img id="slide-img-5" src="http://img130.imageshack.us/img130/4637/naturephoto5.png" class="slide" alt="هنا عنوان الصورة" /></a>

<a href="http://blogspacetech.blogspot.com/"><img id="slide-img-6" src="http://img820.imageshack.us/img820/3824/naturephoto6.png" class="slide" alt="هنا عنوان الصورة" /></a>

<div id="slide-controls">

<p id="slide-client" class="text"><strong>التسميات: </strong><span></span></p>

<p id="slide-desc" class="text"></p>

<p id="slide-nav"></p>

</div>

</div>

</div>

</div>

</div>

انتهى