header-secondnature

CLIENT: Second Nature

header-uig

CLIENT: Ungureanu Imobiliare

header-agriferma

CLIENT: Agriferma

header-bbb

CLIENT: Bere Bauturi Bucuresti

header-fbs

CLIENT: Fatal Beauty Studio

JQuery slider
Dec 2011 14

JQuery slider2

Postat In Aplicatii web,Javascript & Ajax

In acest tutorial explicam cum puteti dezvolta un slider bazat pe jQuery cu descriere si nume pe fiecare imagine din header dar si cu un background personalizat pentru acesta.

DEMO (Poate fi vazut in website-ul nostru sub meniuri)

Pasul 1: Pagina HTML:

Creati o noua pagina HTML si copiati codul de mai jos imediat sub <body> tag:

<div id="header"><div>
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="images/nature-photo.png" alt="" /></a>
<a href=""><img id="slide-img-2" src="images/nature-photo1.png" alt="" /></a>
<a href=""><img id="slide-img-3" src="images/nature-photo2.png" alt="" /></a>
<a href=""><img id="slide-img-4" src="images/nature-photo3.png" alt="" /></a>
<a href=""><img id="slide-img-5" src="images/nature-photo4.png" alt="" /></a>
<a href=""><img id="slide-img-6" src="images/nature-photo4.png" alt="" /></a>
<a href=""><img id="slide-img-7" src="images/nature-photo6.png" alt="" /></a>
<div id="slide-controls">
<p id="slide-client"><strong>post: </strong><span></span></p>
<p id="slide-desc"></p>
<p id="slide-nav"></p>
</div>
</div>

Pasul 2: Fisierul CSS:

Creati un fisier style.css si adaugati codul de mai jos:

*{margin:0;padding:0;}
html{height:100%;}
body{height:100%;color:#a4a4a4;cursor:default;font-size:11px;line-height:16px;text-align:center;background-color:#000;background-position:50% 0;background-repeat:no-repeat;font-family:Tahoma,sans-serif;}
a:link,a:visited{color:#fff;text-decoration:none;}
a img{border:0;}
div.wrap{width:993px;margin:0 auto;text-align:left;}
div#top div#nav{float:left;clear:both;width:993px;height:52px;margin:22px 0 0;background:url url(images/nav-bg.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.wrap{height:299px;background:url(images/header-bg.png) 50% 0 no-repeat;}
div#header div#slide-holder{z-index:40;width:993px;height:299px;position:absolute;}
div#header div#slide-holder div#slide-runner{top:9px;left:9px;width:973px;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:973px;height:46px;display:none;position:absolute;background:url(images/slide-bg.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;background-position:0 0;background-repeat:no-repeat;}
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(images/silde-nav.png);}
div#nav ul li a{background:url(images/nav.png) no-repeat;}

Pasul 3: Un simplu JavaScript pentru jQuery slider:

Copiati codul de mai jos pentru JQuery slider, adaugati dupa tag-ul HTML in body-ul dvs.

<script type=" text="" javascript="">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
</script>

Pasul 4: Adaugati fisiere jquery.js, scripts.js pentru html-ul dvs.:

Descarcati fisierele jquery.js, scripts.js si faceti legatura in pagina HTML in interiorul tag-ului

<head>

Cu..

<script type="text/javascript"> var _siteRoot=´index.html´,_root=´index.html´; </script>

 

Salvati si acum puteti testa scriptul !

Descarca sursa gata realizata.

 

2 Comentarii

  1. vasiliu leonard spune:
    8 februarie 2012 la 06:06

    Pot folosi in site un slider dar cu fotografii de pe alt site?

  2. Marius Dumitrescu (Web Designer) spune:
    8 februarie 2012 la 13:03

    Bineinteles, la pasul 1 in loc de ( src=”images/nature-photo.png” ) modificati cu adresa unde este hostata imaginea care doriti sa o adaugati ex: ( src=”http://www.exemplu.ro/images/nature-photo.png”

Scrie un comentariu