Witam.
Dzisiaj chciałbym wam zaprezentować mój rotator zdjęć, który sam napisałem i jestem z niego zadowolony.
Dlaczego o nim piszę, ponieważ ten rotator jest bardzo prosty w obsłudze i na dodatek można w nim przewijać i zdjęcia i DIV-y z taką zawartością jaką chcemy.
Bez żadnych ograniczeń. W prosty sposób można napisać własny kod CSS i podmienić grafikę (strzałki i kropki).
Osobiście stosuję go do wszystkich stron jakie wykonuję na moim CMS-ie.
Na początku była to wersja bez automatycznego przewijania, ale później uznałem, że niektórzy chcą by zdjęcia same się przewijały. Wtedy wykonałem drugą wersje skryptu.
Może trochę o obsłudze.
Jest ona bardzo prosta. Przykładowa budowa kodu wygląda tak:
<div id="Slider" class="Demo"> <div id="left" > <div class="left"> <img src="imgs/left.png"> </div> </div> <div id="ItemNow" tag="1"></div> <div id="center"> <div id="content"> <img src="banner/1.png" class="item" /> <img src="banner/2.png" class="item" />
<img src="banner/3.png" class="item" /> </div> </div> <div id="right"> <div class="right"> <img src="imgs/right.png"> </div> </div> <div id="icon"></div> </div>
Div z id o nazwie Slider, to główny div w którym jest rotator.
Z id o nazwie left, to div w którym jest obrazek po naciśnięciu, którego przewijamy zdjęcia w lewo, a div z id right w prawo.
ItemNow, to div w którym jest określone zdjęcie, które ma wyświetlać jako pierwsze.
W div-ie o id content wyświetlane są wszystkie div-y lub obrazki, które chcemy przewijać.
Każdy z div-ów lub obrazków musi posiadać klasę o nazwie item, aby zostały uznane przez skrypt jako elementy, które ma być przewijane.
A ikonki lub kropki czy co tam chcemy do przwijania obrazków, są dodawane przez skrypt w div-ie o id icon.
Gdy nie chcemy danego elementu w naszym rotatorze, to wystarczy go usunąć.
Zaraz po tym kodzie trzeba dodać skrypt jQuery.
Skrypt ten ma taką budowę.
<script> $(document).ready(function() { imageSlider("#Slider.Demo", true, 2); }); </script> <script src="slider2.js"></script>
Pierwszy parametr #Slider.Demo, to div, w którym mamy swój rotator. Następny parametr, to true lub false, w zależności czy chcemy, aby nasz rotator sam przewijał treść czy nie. Ostatnim paramterem są liczby, które są sekundami określającymi co ile sekund ma się przwijąć.
DraG
