Слайдер на jQ

@Don1172005 · Регистрация: 22.10.2012

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

Добрый день. В JS я вообще мало что понимаю. Но хочу сделать слайдер, точнее код слайдера я уже нашел, он листается и все круто. Но хочу сделать кнопки под слайдером, при нажатие на которые будет листаться на определенный слайд. Т.е. не когда идет next и prev, а когда под слайдом Точки по ним кликаешь и переходишь на соответстующий позиции Точки слайд.

Вот код слайдера

Кликните здесь для просмотра всего текста

JavaScript
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
48
var slideWidth=960; /*Ширина слайда*/
var sliderTimer;
var slideSpeed=3500; /*Время смены слайда в мс*/
$(function(){
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
    sliderTimer=setInterval(nextSlide,slideSpeed);
    $('.fides_viewport').hover(function(){
        clearInterval(sliderTimer);
    },function(){
        sliderTimer=setInterval(nextSlide,slideSpeed);
    });
    $('#next_slide').click(function(){
        clearInterval(sliderTimer);
        nextSlide();
        sliderTimer=setInterval(nextSlide,slideSpeed);
    });
    $('#prev_slide').click(function(){
        clearInterval(sliderTimer);
        prevSlide();
        sliderTimer=setInterval(nextSlide,slideSpeed);
    });
});
 
function nextSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide++;
    if(currentSlide>=$('.slidewrapper').children().size())
    {
        $('.slidewrapper').css('left',-(currentSlide-2)*slideWidth);  
        $('.slidewrapper').append($('.slidewrapper').children().first().clone()); 
        $('.slidewrapper').children().first().remove();
        currentSlide--;                        
    }
        $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);    
}
 
function prevSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide--;
    if(currentSlide<0)
    {
        $('.slidewrapper').css('left',-(currentSlide+2)*slideWidth);  
        $('.slidewrapper').prepend($('.slidewrapper').children().last().clone()); 
        $('.slidewrapper').children().last().remove();
        currentSlide++;   
    }
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);
}

Код HTML слайдера

Кликните здесь для просмотра всего текста

HTML5
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
    <div class="viewport">
        <ul class="slidewrapper" data-current=0>
            <li class="slide first">
                <div class="img_slide_first"></div>
                                <div class="slide_text"><p><h3>Качественный и удобный сайт</h3></p><br>
                                <p>Перед тем как раскручивать проект, мы анализируем его на поведенческие факторы.</p>
                                <p>Если он не интересен посетителям и процент отказа высокий, мы улучшаем, благодаря нашему отделу разработки. В большинстве случаев меняется структура и дизайн.</p></div>
            </li>
            <li class="slide second">
                                <div class="img_slide_second"></div>
                                <div class="slide_text"><p><h3>Качественный и удобный сайт</h3></p><br>
                                <p>Перед тем как раскручивать проект, мы анализируем его на поведенческие факторы.</p>
                                <p>Если он не интересен посетителям и процент отказа высокий, мы улучшаем, благодаря нашему отделу разработки. В большинстве случаев меняется структура и дизайн.</p></div>
            </li>
            <li class="slide third">
                <div class="img_slide_third"></div>
                                <div class="slide_text"><p><h3>Качественный и удобный сайт</h3></p><br>
                                <p>Перед тем как раскручивать проект, мы анализируем его на поведенческие факторы.</p>
                                <p>Если он не интересен посетителям и процент отказа высокий, мы улучшаем, благодаря нашему отделу разработки. В большинстве случаев меняется структура и дизайн.</p></div>
            </li>
        </ul>
    </div>
    <div class="marker">
      <div class="marker_nav">
        <a href="javascript: void(0)" class="changeSlide dot"></a> <a href="javascript: void(0)" class="changeSlide dot"></a> <a href="javascript: void(0)" class="changeSlide dot"></a>
      </div>
    </div>

changeSlide только название для функции в будущем.

@Kraken73 · 22.07.2016, 15:10

Сообщение от Don1172005

хочу сделать кнопки под слайдером, при нажатие на которые будет листаться на определенный слайд

Ну предложу такую идею реализации
У кнопок задаешь data-slide="1" и т.д., при клике получаешь этот атрибут, и потом с помощью eq() находишь слайд по индексу и отображаешь, ну что-то типо такого

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div class="slider">
  <div class="slide" style="background:green;"></div>
  <div class="slide" style="background:yellow;"></div>
  <div class="slide" style="background:blue;"></div>
</div>
 
 
<ul class="link">
  <li data-slide="0"></li>
  <li data-slide="1"></li>
  <li data-slide="2"></li>
</ul>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.slide {
  width:100px;
  height:200px;
  display:none; 
}
.link li {
  float:left;
  list-style:none;
  width:20px;
  height:20px;
  background:#232323;
  margin:10px;
}

JavaScript
1
2
3
4
5
6
7
8
9
$(document).ready(function(){
$(".slider .slide").eq(0).show("normal");
    $(".link li").click(function(){
    $(".slider .slide").hide("normal");
    var el = $(this);
    var d = el.data("slide");    
    $(".slider .slide").eq(d).show("normal");
  });
});

Добавлено через 43 минуты
Ну и если по вашему примеру, то

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function switchSlide(){
    var el = $(this);
    currentSlide = el.data("slide");;
    if(currentSlide==$('.slidewrapper').children().size())
    {
        $('.slidewrapper').css('left',-(currentSlide-2)*slideWidth);  
        $('.slidewrapper').append($('.slidewrapper').children().first().clone()); 
        $('.slidewrapper').children().first().remove();
        currentSlide--;                        
    }
        $('.slidewrapper').animate({left: -currentSlide*slideWidth},300).data('current',currentSlide);    
}
$(".marker_nav a").click(function(){
        clearInterval(sliderTimer);
        switchSlide();
        sliderTimer=setInterval(nextSlide,slideSpeed);
});

Надеюсь будет работать

Только для этих "кнопок" задайте data-slide, начиная с 0.

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль 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 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/