Próbuję zrobić galerię obrazu podobną do jednego w strona anntaylor

Jestem w stanie zmienić główny obraz na myszy, zmieniając źródło obrazu. Oto kod, którego zastosowałem.

 <div id="navimage1"><img src="p1.png" name="p1" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p1.png'" onLoad="qwe();"/></div>
 <div id="navimage2"><img src="p2.png" name="p2" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p2.png'" onLoad="qwe();"/></div>
 <div id="navimage3"><img src="p3.png" name="p3" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p3.png'" onLoad="qwe();"/></div>
 <div id="navimage4"><img src="p4.png" name="p4" alt="" width="100%" height="100%" onmouseover="document.mainimage.src='p4.png'" onLoad="qwe();"/></div>
 <div id="viewpoint"><img src="p1.png" name="mainimage" alt=""  /></div>

CSS dla powyższego kodu jest:

#viewpoint { top: 180px; width: 60%; left:30%; right:0; height: 720px; position: absolute;}
#navimage1 { left:10%; width:20%; height:180px; top: 180px; position: absolute;}
#navimage1:hover {background-color: #6d6767;}
#navimage2 { left:10%; width:20%; height:180px; top: 360px; position: absolute;}
#navimage2:hover {background-color: #6d6767;}
#navimage3 { left:10%; width:20%; height:180px; top: 540px; position: absolute;}
#navimage3:hover {background-color: #6d6767;}
#navimage4 { left:10%; width:20%; height:180px; top: 720px; position: absolute;}
#navimage4:hover {background-color: #6d6767;}

Problem polega na zmianie obrazu Nie jestem w stanie uzyskać zanikającego efektu. Podaj odpowiedni kod JavaScript, aby uzyskać znikający efekt.

1
sukantk 19 listopad 2011, 09:59

3 odpowiedzi

Najlepsza odpowiedź

Nie udaj się do szczegółów zbyt daleko .. ale robi podobny projekt i oto jak to obsłużyłem ...

<div id="slides">
    ...
    <img src="..." class="trans prev" data-id="image1" />
    <img src="..." class="trans shown current" data-id="image2" />
    <img src="..." class="trans next" data-id="image3" />
    ...
</div>

Następnie w CSS, korzystam z przejść CSS3, gdzie klasa

JavaScript służy do ciągnięcia bieżącego obrazu, usuwając klasę "pokazaną" i zaktualizować klasy odpowiednio ... .Prev i

Utrzymuję również obecne, prev i następne obrazy w stosie. Inne zdjęcia są usuwane z domu ... To utrzymuje rzeczy dość lekkie / szybko. W połączeniu z jQuery.Swipe wtyczką do wsparcia tabletu. Pokaże link do produktu końcowego, ale nie będzie miało miejsce do następnego miesiąca.

2
Tracker1 19 listopad 2011, 06:15

Jquery Fadein - http://api.jquery.com/fadein/

2
Alexei Levenkov 19 listopad 2011, 06:02

JQUERY z Fadein (http://api.jquery.com/fadein/) i metodami Fadeout (http://api.jquery.com/fadeout/) powinny pracować dla Ciebie

2
Jim Deville 19 listopad 2011, 06:02