Блог

Главная - Вопросы по программированию - Как заставить кнопки next / prev работать на бегущей строке?

Как заставить кнопки next / prev работать на бегущей строке?

#jquery #navigation #ticker

#jquery #навигация #тикер

Вопрос:

Я пытаюсь создать тикер новостей в jQuery. Я почти на месте, но я застрял в том, как заставить кнопки prev / next управлять тем, какие новости показываются.

Я бы хотел, чтобы автоматическое включение / выключение оставалось, но также чтобы оно было таким, чтобы, если пользователь нажимает на стрелки, оно переключается при нажатии

 jQuery(document).ready(function($) {
  var tickerSpeed = $('.news-ticker').attr('data-speed');

  $('.news-ticker ul li').hide();
  $('.news-ticker ul li:first').show();

  var currentSlide = 0;
  var slideCount = ($('.news-ticker li').length) - 1;
  
  var startTicker = setInterval(function() {
    $('.news-ticker ul li').eq(currentSlide).fadeOut(500)

    if (currentSlide < slideCount) {
      currentSlide  = 1;
    } else {
      currentSlide = 0;
    }

    $('.news-ticker ul li').eq(currentSlide).fadeIn(500)
  }, tickerSpeed);
});  
 body {
  margin: 0;
  background: #002653;
}

.news-ticker {
  width: 70%;
  position: absolute;
  padding: 20px;
  margin: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  top: 0;
  left: 0;
  background-image: linear-gradient(#FEFEFE, #C3C3C3);
  color: #002653;
  font-family: 'Open Sans', sans-serif;
  border-radius: 10px;
}

.news-ticker .ticker-title {
  font-weight: 600;
  float: left;
  width: 23%;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.news-ticker ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-ticker li {
  position: absolute;
  padding: 0;
  margin: 0;
  text-align: left;
  top: 30%;
  left: 23%;
  list-style: none;
  float: left;
}

.ticker-nav {
  width: 150px;
  height: 50px;
  position: absolute;
  right: 0;
  cursor: pointer;
  padding: 0;
  margin: 0 10px 0px 0px;
  text-align: right;
  top: 10%;
}

.news-ticker .fa-stack {
  font-size: 1.5em;
  margin: 0;
  padding: 0;
  width: 2em;
}

.ticker-nav span {
  margin: 0;
  padding: 0;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<body>
  <div class="news-ticker" data-speed="5000">
    <div class="ticker-title">Important Announcements |</div>
    <ul>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit 1....</li>
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit 2....</li>
    </ul>

    <div class="ticker-nav">
      <span class="fa-stack fa-2x">
      <i class="fas fa-square fa-stack-2x"></i>
      <i class="fas fa-arrow-left fa-stack-1x" style="color:white"></i>
    </span>
      <span class="fa-stack fa-2x">
      <i class="fas fa-square fa-stack-2x"></i>
      <i class="fas fa-arrow-right fa-stack-1x" style="color:white"></i>
    </span>
    </div>
  </div>

Ссылка на Codepen:https://codepen.io/anon/pen/YgvjdK

Ответ №1:

попробуйте этот код для кнопок next и prev.

   var currentSlide;
  var slideCount;
jQuery(document).ready(function($) {
  var tickerSpeed = $('.news-ticker').attr('data-speed');

  $('.news-ticker ul li').hide();
  $('.news-ticker ul li:first').show();

  currentSlide = 0;
  slideCount = ($('.news-ticker li').length) - 1;
  
  var startTicker = setInterval(autoTicker, tickerSpeed);
  
  $('.ticker-nav').on('click','.fa-arrow-left',function(){
    clearInterval(startTicker);
    $('.news-ticker ul li').eq(currentSlide).fadeOut(500);
    if (currentSlide ==0 ) {
      currentSlide =slideCount;
    } else {
      currentSlide -=1;
    }
    $('.news-ticker ul li').eq(currentSlide).fadeIn(500);
    startTicker = setInterval(autoTicker, tickerSpeed);
  });
  $('.ticker-nav').on('click','.fa-arrow-right',function(){
    clearInterval(startTicker);
    $('.news-ticker ul li').eq(currentSlide).fadeOut(500);
    if (currentSlide < slideCount) {
      currentSlide  = 1;
    } else {
      currentSlide = 0;
    }
    $('.news-ticker ul li').eq(currentSlide).fadeIn(500);
    startTicker = setInterval(autoTicker, tickerSpeed);
  });
});

function autoTicker(){
    $('.news-ticker ul li').eq(currentSlide).fadeOut(500)

    if (currentSlide < slideCount) {
      currentSlide  = 1;
    } else {
      currentSlide = 0;
    }

    $('.news-ticker ul li').eq(currentSlide).fadeIn(500)
}  
 body {
  margin: 0;
  background: #002653;
}

.news-ticker {
  width: 70%;
  position: absolute;
  padding: 20px;
  margin: 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  top: 0;
  left: 0;
  background-image: linear-gradient(#FEFEFE, #C3C3C3);
  color: #002653;
  font-family: 'Open Sans', sans-serif;
  border-radius: 10px;
}

.news-ticker .ticker-title {
  font-weight: 600;
  float: left;
  width: 23%;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.news-ticker ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.news-ticker li {
  position: absolute;
  padding: 0;
  margin: 0;
  text-align: left;
  top: 30%;
  left: 23%;
  list-style: none;
  float: left;
}

.ticker-nav {
  width: 150px;
  height: 50px;
  position: absolute;
  right: 0;
  cursor: pointer;
  padding: 0;
  margin: 0 10px 0px 0px;
  text-align: right;
  top: 10%;
}

.news-ticker .fa-stack {
  font-size: 1.5em;
  margin: 0;
  padding: 0;
  width: 2em;
}

.ticker-nav span {
  margin: 0;
  padding: 0;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>

<body>
  <div class="news-ticker" data-speed="5000">
    <div class="ticker-title">Important Announcements |</div>
    <ul>
      <li>Lorem ipsum dolor sit amet 1, consectetur adipiscing elit 1....</li>
      <li>Lorem ipsum dolor sit amet 2, consectetur adipiscing elit 2....</li>
      <li>Lorem ipsum dolor sit amet 3, consectetur adipiscing elit 3....</li>
      <li>Lorem ipsum dolor sit amet 4, consectetur adipiscing elit 4....</li>
    </ul>

    <div class="ticker-nav">
      <span class="fa-stack fa-2x">
      <i class="fas fa-square fa-stack-2x"></i>
      <i class="fas fa-arrow-left fa-stack-1x" style="color:white"></i>
    </span>
      <span class="fa-stack fa-2x">
      <i class="fas fa-square fa-stack-2x"></i>
      <i class="fas fa-arrow-right fa-stack-1x" style="color:white"></i>
    </span>
    </div>
  </div>