Показать сообщение отдельно
  #11 (permalink)  
Старый 24.08.2016, 01:52
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

В ссылку должен быть обернут <div id="scr">, а значение берется из массива по индексу указанному в frame. Но переход будет в таком случае и по щелчку на кнопках навигации. Самое простое решение, это перенести их в aside.

<script> 
var slider = {
    slides : [['build.jpg','url1'],['service.jpg', 'url2'],['modern.jpg','url3'],['support.jpg','url4']],
    frame:0, // текущий кадр для отображения - индекс картинки из массива
    set: function() { // установка нужного фона слайдеру
        var o = document.getElementById("scr");
        o.style.backgroundImage = "url("+this.slides[this.frame][0]+")";
        o.parentNode.href = this.slides[this.frame][1];
    },
    init: function() { // запуск слайдера с картинкой с нулевым индексом
        this.set();
    },
    left: function() { // крутим на один кадр влево
        this.frame = !this.frame ? this.slides.length-1 : this.frame - 1;
        this.set();
    },
    right: function() { // крутим на один кадр вправо
        this.frame = this.frame == this.slides.length-1 ? 0 : this.frame + 1;
        this.set();
    }
};

//.....
</script>     
</head> 

<body>
<aside>
    <a href="">
        <div id="scr"></div>
    </a>
    <div id="bleft" onclick="slider.left()">PREV</div>
    <div id="bright" onclick="slider.right()">NEXT</div>
</aside>


Можно менять и url страницы, но для этого нужно установить обработчик щелчка по "scr", в котором и указывать переход на slider.slides[slider.frame][1].

Последний раз редактировалось laimas, 24.08.2016 в 08:02.
Ответить с цитированием