По клику смена картинки

@sendxt · Регистрация: 25.04.2012

Студворк — интернет-сервис помощи студентам

Добрый вечер, подскажите как сделать смену картинки по клику на кнопку...
Вот что я наделал, на части js встало всё)

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="kirpykla-block-2">
                <img class="img-2" src="/img/vidiniai/paslaugos_kategorija/slider-img.png"> 
                <img class="frame-2" src="/img/titulinis/naujienos/naujienu_frame_pic.png">
                <ul class="slider">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>

CSS
1
2
3
4
5
6
7
8
9
10
11
.slider {
    list-style: none;
    margin:5px 0 0 50px;
}
 
.slider li {
    float:left;
    margin:0 0 0 5px;
    padding:3px 0 0 30px;
    background:#c8c8c8;
}

JavaScript
1
2
3
4
5
$(function(){
        $('ul.slider li').click(function() {
            $(this).attr('src', '/img/titulinis/naujienos/pic/naujiena1.png');
            $(this).next().css('color', '#876874');
    });

@sendxt · 19.05.2014, 21:53 **[ТС]**

нашёл пример пробую по нему переделать но почему то не срабатывает? что тут не так может быть?

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="slider-content">
                    <img class="img-2" src="/img/vidiniai/paslaugos_kategorija/slider-img.png"> 
                    <img class="frame-2" src="/img/titulinis/naujienos/naujienu_frame_pic.png">
                </div>
                <div class="slider">
                    <a rel="1" href="#"></a>
                    <a rel="2" href="#"></a>
                    <a rel="3" href="#"></a>
                    <a rel="4" href="#"></a>
                    <a rel="5" href="#"></a>
                </div>

JavaScript
1
2
3
4
$('.slider a').click(function(){ 
        $(this).addClass('active').siblings().removeClass('active'); 
        $('.slider-content').attr({'src' : 'url(/img/titulinis/naujienos/pic/pic'+this.rel+'.jpg)' }); 
    });

Добавлено через 36 минут
поправил сейчас работает, только страница перезагружается почему-то как исправить?

JavaScript
1
2
3
4
$('.slider a').click(function(){ 
        $(this).addClass('active').siblings().removeClass('active'); 
        $('.slider-content .img-2').attr({'src' : '/img/titulinis/naujienos/pic/pic'+this.rel+'.jpg' }); 
    });

@suharik · 19.05.2014, 21:56

JavaScript
1
2
3
4
5
$('.slider a').click(function(){ 
        $(this).addClass('active').siblings().removeClass('active'); 
        $('.slider-content .img-2').attr({'src' : '/img/titulinis/naujienos/pic/pic'+this.rel+'.jpg' }); 
        return false;
    });

@sendxt · 19.05.2014, 22:02 **[ТС]**

suharik, а как бэкграунд поменять?? я кнопки делаю

HTML5
1
2
3
4
5
6
7
<div class="slider">
                    <a rel="1" href="#"></a>
                    <a rel="2" href="#"></a>
                    <a rel="3" href="#"></a>
                    <a rel="4" href="#"></a>
                    <a rel="5" href="#"></a>
                </div>

при клике по кнопке чтоб менялся бэкграунд той по которой кликнул?

CSS
1
2
3
4
5
6
.slider a {
    float:left;
    margin:0 0 0 5px;
    padding:3px 0 0 30px;
    background:#c8c8c8;
}

@suharik · 19.05.2014, 22:06

CSS
1
2
3
4
5
6
7
8
9
10
.slider a {
    float:left;
    margin:0 0 0 5px;
    padding:3px 0 0 30px;
    background:#c8c8c8;
}
 
.slider a:hover {
   background:red;
}

Это при наведении.
А если при клике то у Вас же вешается класс active, делайте так

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.slider a {
    float:left;
    margin:0 0 0 5px;
    padding:3px 0 0 30px;
    background:#c8c8c8;
}
 
.slider a:hover {
   background:red;
}
.slider a.active{
   background:green;
}

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .