在javascript,jquery中滚动的上一个和下一个按钮

时间:2017-11-03 07:30:50

标签: javascript jquery

我在网站上有一个部分,我需要显示facebook Feed。 我有两个按钮,如图所示。使用按钮我需要在新闻源之间“滚动”。 enter image description here

我应该用javascript或jquery来做这件事,但我对这些编程语言并不陌生。

.content .tab-pane > #facebook_ticker > li{
	max-height: 165px;
	min-height:165px;
}
.content .second-row .tab-content  .ticker-controls,
.single .content  .tab-content  .ticker-controls{
	background:rgba(0,0,0,.7);
	height: 35px;
	padding: 5px 20px;
	margin-top: -10px;
	font-family: 'TGLTCER';
	font-size: 1.2em;
}
<div class="hidden-xs">
                <h1 id="tgb_head"><span id="facebook_icon" class="social-content-icon"></span> Facebook</h1>
                    
    <div class="tab-content">
      <div class="tab-pane active fade in">
         <ul class="list-unstyled" id="facebook_ticker">
             <?php echo do_shortcode("[custom-facebook-feed]"); ?> 
          </ul>
       </div>
     <div id="facebook_ticker_controls" class="ticker-controls">
    <a href="#" class="prev pull-left test" id="fprev"><span class="glyphicon glyphicon-chevron-down"></span>&nbsp; Previous</a> 
    <a href="#" class="next pull-right test" id="fnext">Next &nbsp;<span class="glyphicon glyphicon-chevron-up"></span></a> 
   </div>
                      
 </div><!-- end tab-content -->
                    
 </div><!-- end facebook -->
            
            
 <!-- The  ?php echo do_shortcode("[custom-facebook-feed]"); ? generates the following code--> 
                
                
 <div class="cff-wrapper">
   <div id="cff" data-char="400" class="cff-width-resp cff-default-styles" style="padding:5%; ">
   
   <div class="cff-item cff-link-item author-princeton-partners-inc-" id="cff_92134012073_10155928811127074" style="border-bottom: 1px solid #ddd; "><div class="cff-author"><a href="https://facebook.com/92134012073" target="_blank" rel="nofollow" title="Princeton Partners, Inc. on Facebook"><div class="cff-author-text"><p class="cff-page-name cff-author-date">Princeton Partners, Inc.</p><p class="cff-date"> 3 days ago </p></div><div class="cff-author-img"><img src="https://graph.facebook.com/92134012073/picture?type=square" title="Princeton Partners, Inc." alt="Princeton Partners, Inc." width="40" height="40"></div></a></div><p class="cff-post-text"><span class="cff-text" data-color="">At PPI, we love all things spooky. Check out our website to find our special Halloween video reel and a kit to throw your own Gargoyle-style X-Files party. Have a ghoulish day! </span><span class="cff-expand">... <a href="#" style="color: #"><span class="cff-more">See More</span><span class="cff-less">See Less</span></a></span></p><div class="cff-shared-link" style="border: 1px solid #; "><div class="cff-text-link cff-no-image"><p class="cff-link-title"><a href="" target="_blank" rel="nofollow" style="color:#;">Check out this link</a></p><p class="cff-link-caption" style="color:#;"><a class="vglnk" href="" rel="nofollow"><span>princetonpartners</span><span>.</span><span>com</span></a></p><p class="cff-post-desc" style="font-size:12px; "><span>  </span></p></div></div><div class="cff-post-links"><a class="cff-viewpost-facebook" href="" title="View on Facebook" target="_blank" rel="nofollow">View on Facebook</a><div class="cff-share-container"><span class="cff-dot">·</span><a class="cff-share-link" href="javascript:void(0);" title="Share">Share</a><p class="cff-share-tooltip"><a href="" target="_blank" class="cff-facebook-icon"><i class="fa fa-facebook-square"></i></a><a href="" target="_blank" class="cff-twitter-icon"><i class="fa fa-twitter"></i></a><a href="" target="_blank" class="cff-google-icon"><i class="fa fa-google-plus"></i></a><a href="" target="_blank" class="cff-linkedin-icon"><i class="fa fa-linkedin"></i></a><a href="" target="_blank" class="cff-email-icon"><i class="fa fa-envelope"></i></a><i class="fa fa-play fa-rotate-90"></i></p></div></div></div>
   
   
   </div>

我尝试过这样的事情:

  <script>
  $('#facebook_ticker_controls a.prev').click(function() {
  $.scrollTo($(this).closest('cff-item').prev(),800);
  });

  $('#facebook_ticker_controls a.next').click(function() {
  $.scrollTo($(this).closest('cff-item').next(),800);
  }); 
  </script>

但它什么也没做。你可以给我一个提示,试着解决这个问题吗?感谢

0 个答案:

没有答案