0

嗨，我正在尝试通过 jQuery 制作一个滑块，我正在创建一个年度滑块来显示给定年份的最佳新闻。

我可以通过单击按钮使我的滑块自动从左到右移动。但是，当我隐藏我的 2003 内容并尝试附加我的 2004 内容时，滑块无法正常工作，它不会自动滑动或通过单击滑动。

事实上，当我将 2004 年的内容添加到页面中时，滑块开始扩展，我想这是因为我已经将滑块包含在相同的类和 ID 等中，所以它让我的滑块感到困惑。

有谁知道解决方案，或者我可以如何以不同的方式解决这个问题？

我创建了一个简化的JSFiddle或在下面查看我的代码：

索引.html

<div id="newsrotatorwrapper">
  <div id="newsrotator" class="year2003">
  <div class="newsyear">
   <h2 class="timeline_year">2003</h2>
   </div>

     <div id="slider">
         <div class="newscontent">
                <h3 class="timeline_heading">Concorde comes to an end</h3>
                        <p class="timeline_content">British Airways and Air France made simultaneous announcements that they would be permanently grounding the famous supersonic airliners in 2003. Passenger numbers had never recovered since the crash near Paris in 2000 and the aircraft was unprofitable.</p>
                        </div>

                        <div class="newscontent">
                        <h3 class="timeline_heading">Apple Launches Safari Browser</h3>
                        <p class="timeline_content">“Safari is the fastest browser on the Mac, and we predict that many will feel it is the best browser ever created,” said Steve Jobs, Apple’s CEO. “We are bringing innovation back into this category with the first all new browser created in many years.”&lt;/p>
                        </div>

                        <div class="newscontent">
                        <h3 class="timeline_heading">LOTR: Return of the King</h3>
                        <p class="timeline_content">Seven years ago when Jackson began working on the trilogy, "The Lord of the Rings" wasn't being looked at as the hottest property, at least beyond the fantasy fans who long obsessed over the idea of a proper live-action treatment of J.R.R. Tolkein's books. But now, after the mind-blowing achievements of "The Two Towers" and the "The Fellowship of the Ring," it would seem that the fans have taken over.</p>
                        </div>                
                    </div> <!-- end slider -->
                </div> <!-- End news rotator -->


      <div id="newsrotator" class="year2004">
                    <div class="newsyear">
                    <h2 class="timeline_year">2004</h2>
                    </div>

                    <div id="slider">
                        <div class="newscontent">
                        <h3 class="timeline_heading">Loreum Ipsum</h3>
                        <p class="timeline_content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                        </div>

                        <div class="newscontent">
                        <h3 class="timeline_heading">Loreum Ipsum 2</h3>
                        <p class="timeline_content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                        </div>

                    </div> <!-- end slider -->
                </div> <!-- End news rotator -->



                <div id="rotator_arrows_wrapper">
                    <span  class="rotatorarrows" id="left">Prev</span>
                    <span class="rotatorarrows" id="right">Next</span>
                    </div>
                </div> <!-- End news roator wrapper --> 
 <button id="2004btn">2004</button>

js/js.js

// 新旋转

var W = $('#newsrotator').width();      // gallery width
var N = $('#slider .newscontent').length;    // number of elements
var C = 0;                          // counter
var intv;                         // auto anim. interval


if(N<=1){ 
  $('#left, #right').hide();  // hide buttons only 1 element
}  


$('#slider').width( W*N );          // set slsider width

$('#left, #right').click(function(){

  if(this.id=='right'){

    C++;
    C = C % N;     // reset to '0' if end reached

  }else{ // left was clicked

    C--;
    if(C===-1){   // IF C turns -1 scroll to last one (N-1)
      C = N-1; 
    }

  }

  $('#slider').stop().animate({left: -C*W }, 1000 );
});


// auto rotate

function autoRotate(){
  intv = setInterval(function(){
      $('#right').click();
  },8000); // pause time
}
autoRotate(); // start auto rotate

// pause hover

$('#newsrotator').on('mouseenter mouseleave', function( e ){
   var mEnt = e.type=='mouseenter';
  if(mEnt){
     clearInterval(intv);
  }else{
     autoRotate();
  }
});

$('#2004btn').on('click', function () {
    $('.year2003').fadeOut();
    $('.year2004').fadeIn();
});
4

1 回答 1

1

您有重复的 ID 值：#newsrotator

这是无效的 HTML，jQuery 只会作用于第一个。你需要改变你对 ID 和类的想法——前者应该是为了唯一性，而后者应该是为了多用途场景（元素的“类”）。

如果您看一下最流行的滑块是如何工作的，您将一个 ID 传递给函数，并且其中的所有事件处理程序都与 $(this) 相关，这是传递的 ID。当您使用按钮切换滑块时，您需要以这种方式进行重组并调用您的 ID。

更新：这是一个开始：http: //jsfiddle.net/isherwood/UUHhV/6/

// build the rotator
var myRotator = function (myId) {
    ... all the rotator goodies ...
}

// call the rotator on the first element
myRotator('#newsrotator1');

// switch elements and call the rotator on the second element
$('#2004btn').on('click', function () {
    $('.year2003').fadeOut();
    myRotator('#newsrotator2');
    $('.year2004').fadeIn();
});
于 2013-10-18T13:41:42.937 回答