我正在尝试在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>代码笔链接 ： https://codepen.io/anon/pen/YgvjdK
尝试使用"下一个"和"上一个"按钮的这段代码。
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>