Question

我正在尝试在jQuery中创建新闻动态。我快到了，但是我对如何使上一个/下一个按钮控制正在显示的新闻项感到困惑。

我希望保留自动淡入/淡出功能，但也要保留它，以便用户单击箭头时，它会在单击时循环显示

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

Answer 1

尝试此代码来显示下一个和上一个按钮。

  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>

如何使下一个/上一个按钮在置顶栏中起作用？

1 个答案: