Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
-- Купить пыльцу высшего качества --

Слайдер на javascript

Здравствуйте уважаемые начинающие веб-мастера.

Самый простой слайдер на чистом javascript с очень простым кодом, который работает во всех шаблонах, на которых я его тестировал.

Картинок можно добавлять сколько угодно. Все они будут появляться с заданным интервалом.

HTML


<div id="carousels">
<div class="carousel demonstration"><img src="images/1.jpg"></div>
<div class="carousel"><img src="images/2.jpg"></div>
<div class="carousel"><img src="images/3.jpg"></div>
</div>

Javascript


<script>
var carousels = document.querySelectorAll('#carousels .carousel');
var currentCarousel = 0;
var carouselInterval = setInterval(nextCarousel,5000); /* Интервал между картинками */

function nextCarousel(){
carousels[currentCarousel].className = 'carousel';
currentCarousel = (currentCarousel+1)%carousels.length;
carousels[currentCarousel].className = 'carousel demonstration';
}
</script>

CSS


#carousels{
position: relative;
}

.carousel{
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity 3s; /* Время появления картинки */
}

.demonstration{
opacity: 1;
}

Желаю творческих успехов.

Запись опубликована в рубрике Уроки javascript и jQuery. Добавьте в закладки постоянную ссылку.
А так же:

12 комментариев на «Слайдер на javascript»

  1. stariс говорит:

    Не помучаться, а пошевелить мозгами, что вы и сделали. Молодец.

  2. Oleg говорит:

    Это что бы помучаться, вы забыли здесь полностью указать код CSS :
    »
    #carousels{
    position: relative;
    width: 340px;
    height: 280px;
    margin: 0 auto;
    »
    ????

    Без конкретной ширины и высоты получается кака…

  3. stariс говорит:

    Ваня, а ты разве не видишь что он работает?

  4. Иван говорит:

    Код в примере так как он написан — не будет работать. У автора нет понимания основ JS

  5. олег говорит:

    всем привет я наверное не один такой . вставил код js все огонь работает, но мне понадобилось несколько каруселек и тут фиг-вам, работают по очереди.
    Подскажи,что поменять в коде?

  6. stariс говорит:

    Пользуйтесь на здоровье

  7. Сергей говорит:

    Уважаемый автор. Весьма был доволен Вашим кодом для простого слайдера.
    С уважением, Сергей, 67 лет, г. Москва.

  8. stariс говорит:

    Попробуйте вот в таком виде. Я кое что исправил.

  9. stariс говорит:

    По поводу JS, вам лучше вот сюда. Я наверно так подробно не смогу всё объяснить так как сам изучаю его методом тыка. Продуктивный метод между прочим.

  10. Наталья говорит:

    Здравствуйте, Сергей. Мой первый сайт не в WordPress, поэтому шорткод мне не нужен. Я пишу сайт вручную. Вставила туда карусель от Вас на css. Всё отлично работает. Попробовала на JS — ничего. Ну рано, так рано. Всё равно спасибо, много интересного на Вашем сайте.

  11. stariс говорит:

    Наверное Наташ чуть рановато. Эта карусель сделана для песочницы, т.е чистый код. В шаблоне можно попробовать вставить весь код, и css и html и script в шёрткод, и вывести в нужном месте. Если же вставлять этот слайдер в шапке, то можно опять попробовать шёрткод в хеадер, или html в header, scc в style, а скрипт через функцию в functions.php. Короче дело ясное, что дело тёмное? Так для каждого шаблона ещё будут нюансы в которых сначала надо разобраться. Попробуйте через шёрткод, если не получится, оставьте до приобретения более основательных знаний, а то просто не поймёте меня. Вообще вставить в ручную карусель в шаблон под силу только не плохому программисту.

  12. Наталья говорит:

    Все скопировала, css в файл css, картинки в контент, JavaScript в html файл в .
    Ничего не заработало. Картинки лежат в контенте спокойненько. Ничего не движется.
    Что не так? (делаю первый сайт, поэтому мало что понимаю, в джаваскрипт вообще ничего)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *