Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
ref_flix
3 / 3 / 0
Регистрация: 16.12.2015
Сообщений: 61
1

Текст на слайдере

28.02.2016, 01:30. Просмотров 194. Ответов 0
Метки нет (Все метки)

Помогите пожалуйста что бы на каждой картинки слайдера был свой текст
есть такой слайдер
PHP
1
2
3
4
5
            <div  id="slider" class="slider_wrap">
                <img alt="Image 1" class="active" src="images/home_01.png"/>
                <img alt="Image 2" src="images/home_03.png" />
                <img alt="Image 3" src="images/home_02.png" />
            </div>
css
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.slider_wrap {
margin:0px auto;
width: 100%;
max-width:1920px;
height:480px;
position:inherit;
overflow:hidden;
}
.slider_wrap img {
width:100%;
max-width:1920px;
height:600px;
display:none;
position:absolute;
top:0;  
}
.slider_wrap img:first-child {
display:block;
}
.slider_wrap span {
margin-top:-78px;
width:51px;
height:111px;
display:block;
position:absolute;
top:52%;
cursor:pointer;
background:url(../images/slider2_arrow.png) no-repeat;
}
.slider_wrap span.next {
right:0;
background-position: -60px -1px;
}
.slider_wrap span.next:hover {
background-position:-60px -1px;
}
.slider_wrap span.prev {
left:0;
background-position: 0 0;
}
.slider_wrap span.prev:hover {
background-position: 0 0px;
}
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$(function () {
    var elWrap = $('#slider'),
        el =  elWrap.find('<div class="io">'),
        indexImg = 1,
        indexMax = el.length,
        phase = 3000;
    
    function change () {
        el.fadeOut(500);
        el.filter(':nth-child('+indexImg+')').fadeIn(500);
    }   
        
    function autoCange () { 
        indexImg++;
        if(indexImg > indexMax) {
            indexImg = 1;
        }           
        change ();
    }   
    var interval = setInterval(autoCange, phase);
 
    elWrap.mouseover(function() {
        clearInterval(interval);
    });
    elWrap.mouseout(function() {
        interval = setInterval(autoCange, phase);
    });
    
    elWrap.append('<span class="next"></span><span class="prev"></span>');
    var btnNext = $('span.next'),
        btnPrev = $('span.prev');
        
    btnNext.click(function() {
        indexImg++;
        if(indexImg > indexMax) {
            indexImg = 1;
        }
        change ();
    });
    btnPrev.click(function() {
        indexImg--;
        if(indexImg < 1) {
            indexImg = indexMax;
        }
        change ();
    }); 
});
За ранние спасибо
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
28.02.2016, 01:30
Ответы с готовыми решениями:

Анимация в слайдере
Добрый вечер. Как реализовать воспроизведение анимации только после того как...

Переключение изображений в слайдере
Доброго времени суток, уважаемые. Есть некоторый код:...

Группы картинок в слайдере
Доброго времени суток! Назрел такой вопрос. Есть Слайдер сделанный на программе...

Кнопка паузы в слайдере
Помогите, пожалуйста, со слайдером! Необходимо поставить кнопки « пауза» и...

Картинка долго грузится на слайдере
Всем Привет! ПОМОГИТЕ ПОЖАЛУЙСТА! На странице имеется несколько скрытых дивов,...

0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
28.02.2016, 01:30

Побороть скриптовую высоту overflow:hidden в слайдере
Здравствуйте. Есть слайдер Royal Slider. В его настройках есть такой параметр...

Как настроить переход на конкретный слайд в слайдере на сайте
На главной странице сайта есть слайдер. Он состоит из 4 слайдов, на которых...

JS. Как сделать чтобы в слайдере менялись картинки автоматический с css
&lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru