اضافة jquery auto playing
اليوم لدينا موضوع بسيط سوف يسهل لزوارك استهلاك المعلومات بشكل أفظل
الموضوع تم قرائته من هدا الموقع 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU6SnqQheSCRZJl6tFVaydEvnL-qp-XF2D2epatJIasRJHg_7WGD5IdyfvAlmcu7Tks9G4iAAczK5BjE-DhX93AF-JeBsCfp-Cd0QJC1Gv28AfyiFWfJYL7HoeDIBvhp5qjfqTWP53g9dt/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkDtnHH8KTk6ut4uMy_fxX-20wQDTRMAQuq64h-ahsWSEq6YDt9YLTITRHJvy1YZseAFzvEmvWoOP9Fjd_I0mluH_Vk4sJBDw6RDZeLmCuYZ3zIIfpBtM4r2PE76Twt9i6D1ubFlktBW0d/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLBA4sDzBzxZ5atnvplaELjcguK6K5iqxQgpEXLvyUwF8cwarvfbLWNnSgnHsr3KkzIaxFF9zMiD3higa8EVpWmBIbiYdAhQ4HHXnKlmcz8NVJWInRXWwga9AB6_KFlQqbeuLPoXI08xdY/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>
انتهى
|
اتمني زيادة الشرح اني لم افهم شي