Nivo Slider: Эффект карусели Skype.com - изменение CSS для Nav на основе CurrentSlide - PullRequest
Новая
       17

Nivo Slider: Эффект карусели Skype.com - изменение CSS для Nav на основе CurrentSlide

0 голосов
/ 18 декабря 2011

Я пытался создать слайдер на основе Nivo Slider, который выглядит и функционирует подобно карусели, найденной на http://www.skype.com/intl/en/home

Я просматривал вопросы по Ashfame и Chris_Mac , однако большую часть выходных я ходил кругами.Теперь вернемся к исходной точке и начнем с основ.

До сих пор мне удалось настроить навигацию таким образом, чтобы при наведении мыши на конкретный элемент навигации nivo-controlNav отображал правильный слайд и останавливал слайдер: 

<script type="text/javascript">    
$("ul#nav_1").mouseenter(
    function () {
       $(".nivo-controlNav a:nth-child(2)").click();
       $('#slider').data('nivoslider').stop();
    });
</script>

Я также создал последующую функцию отпускания мышью для элементов навигации (1,2,3 и т. Д.) 

<script type="text/javascript">
$("ul#nav_1,ul#nav_2,ul#nav_3").mouseleave(
     function () {
       $('#slider').data('nivoslider').start();
      });
    </script>

Я застрял в той части, где не-события мышивойти. Когда слайдер загружается, он должен обновить nav css, чтобы выделить текущий выбранный элемент навигации.Вот что у меня есть (не так много, я знаю, но я пытаюсь). 

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
       beforeChange: function(){ // this function should load css styles
          var slide_num = $('#slider').data('nivo:vars').currentSlide;
          function scrollBannerCss () {
             if (slide_num == 1) {
               $("ul#nav_1").css("backgound-color", "blue");
                 }
           }
       },
       afterChange: function(){ // this function should unload css styles
    });
 });
</script>

Затем простое html навигационное меню: 

<ul id="nav">
   <li id="nav_1">button 1</li>
   <li id="nav_2">button 2</li>
   <li id="nav_3">button 3</li>
</ul>

Любая помощь / идеи/ размышления будут высоко оценены!

1 Ответ

0 голосов
/ 07 февраля 2012

Я знаю, что это немного старовато, но вы можете посмотреть на http://www.agilecarousel.com/.

http://www.agilecarousel.com/flavor_3.htm, это именно то, о чем вы говорите, учитывая, что сегодня skype.comто же самое, что вы видели два месяца назад.

...