Viac na
Zmena zdroja obrázka pomocou jQuery
Môj DOM vyzerá takto:
<div id="d1">
<div class="c1">
<a href="#"><img src="img1_on.gif"></a>
<a href="#"><img src="img2_on.gif"></a>
</div>
</div>
Keď niekto klikne na obrázok, chcem, aby sa src obrázka zmenil na <img src="imgx_off.gif">
, kde x
predstavuje obrázok číslo 1 alebo 2.
Je to možné alebo musím na zmenu obrázkov použiť CSS?
706
3
Môžete použiť funkciu jQuery's attr(). Ak má napríklad váš tag
img
atribútid
s hodnotou 'my_image', urobíte toto:Potom môžete zmeniť
src
vášho obrázka pomocou jQuery takto:Ak to chcete pripojiť k udalosti
click
, môžete napísať:Ak chcete obrázok otočiť, môžete urobiť toto:
Ukážem vám, ako zmeniť obrázok
src
tak, aby sa po kliknutí na obrázok otáčal cez všetky obrázky, ktoré sú vo vašom HTML (konkrétne vo vašom idd1
a triedec1
)... či už máte v HTML 2 alebo viac obrázkov**.Ukážem vám tiež, ako vyčistiť stránku po dokončení dokumentu tak, aby sa na začiatku zobrazil len jeden obrázok.
Úplný kód
Rozdelenie
Vytvorte kópiu odkazov obsahujúcich obrázky (poznámka: pre pridanú funkčnosť by ste mohli využiť aj atribút href odkazov... napríklad [zobraziť pracovný odkaz pod každým obrázkom][1]):
Skontrolujte, koľko obrázkov bolo v HTML, a vytvorte premennú na sledovanie toho, ktorý obrázok sa zobrazuje:
Upravte dokument'HTML tak, aby sa zobrazoval len prvý obrázok. Všetky ostatné obrázky odstráňte.
Viažte funkciu, ktorá sa postará o kliknutie na odkaz na obrázok.
Jadrom uvedeného kódu je použitie
++$imgShow % $length
na cyklické prechádzanie objektu jQuery, ktorý obsahuje obrázky.++$imgShow % $length
najprv zvýši naše počítadlo o jednotku a potom toto číslo zmení na počet obrázkov. Výsledný index sa tak bude cyklicky meniť od0
podĺžka-1
, čo sú indexy objektu$images
. To znamená, že tento kód bude pracovať s 2, 3, 5, 10 alebo 100 obrázkami... cyklicky prechádza každý obrázok v poradí a po dosiahnutí posledného obrázka sa znovu spustí od prvého obrázka.Okrem toho sa
.attr()
používa na získanie a nastavenie atribútu "src" obrázkov. Na výber prvkov z objektu$images
nastavím$images
ako jQuery context pomocou tvaru$(selector, context)
. Potom použijem.eq()
na výber práve prvku s konkrétnym indexom, ktorý ma zaujíma.[jsFiddle príklad s 3 obrázkami][5]
Môžete tiež uložiť
src
do poľa.[jsFiddle príklad s 3 obrázkami][6]
A tu'je spôsob, ako začleniť hrefs zo značiek kotiev okolo obrázkov:
[jsFiddle príklad][7]
Môžete to urobiť aj pomocou jQuery týmto spôsobom:
Môžete mať podmienku, ak existuje viacero stavov pre zdroj obrázku.