Простое слайд-шоу изображений на jQuery

Сейчас мало кого удивишь таким эффектом как слайд-шоу изображений. Практически на каждом сайте есть такая штука. Некоторые размещают такие блоки в шапке сайта, а некоторые просто в боковом сайдбаре. Большой разницы где размещать – нет.

“Почему я должен отставать от всего мира…” – подумал я и попробовал реализовать этот эффект у себя на сайте. Точнее нашел на просторах интернета ту реализацию, которая показалась мне намного удачнее остальных.

На мой взгляд я нашел один из самых простых и легких решений, которое позволяют сделать автоматическую смену картинок без какого-либо управления. Они просто сменяются сами по себе и все.

На всех сайтах я стараюсь не использовать CSS-параметр position:absolute, но пока без него я не нашел реализации такого блока, хотя подозреваю, что это можно сделать отрицательными margin и z-index. Если найду более элегантное решение, то обязательно напишу об этом пост.

Буду использовать вот это решение. Для простого вывода изображений на автомате оно подходит как нельзя лучше. Вот пример реализации:

…ПРИМЕР…

Чтобы реализовать у себя на сайте слайд-шоу без каких-либо изысков, необходимо:

  1. загрузить дополнительный js-файл slideshow.js
  2. подключить его вместе с jquery. Размещать целесообразнее этот код перед закрывающимся тегом body. У меня на сайте за это отвечает код:
    <script type="text/javascript" src="/js/jquery.js"></script>
    <script type="text/javascript" src="/js/slideshow.js"></script>
    <script type="text/javascript">
    $(document).ready(
           function(){
            $('ul#slideshow').innerfade({
                'containerheight':  '179px'
            });
          });
    </script>

    где containerheight – это высота ваших картинок.
  3. Для того, чтобы объявить картинки, которые необходимо запускать в слайд-шоу, нужно в месте, где это требуется, разместить:
    <ul id="slideshow">
    	<li><img src="/images_design/image_1.jpg" /></li>
    	<li><img src="/images_design/image_2.jpg" /></li>
    </ul>

Если открыть сам файл slideshow.js, то можно увидеть еще несколько параметров, которые можно добавить в код из пункта №2 (там где containerheight), а правильнее и проще поправить их прямо в самом slideshow.js, облегчая код страницы. Можно, кстати, и containerheight убрать в js-файл, тем самым сократив немного время загрузки страницы.

Кстати, в примере можно просто посмотреть исходный код и самостоятельно лицезреть код реализации. Если дополнительно использовать GZip-сжатие JS-файлов то можно практически не потерять в скорости загрузки страницы.

Комментарии:

Имя
e-mail
Сайт
Текст комментария: