Question

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

我可以让我的滑块自动从左向右移动，只需点击一下按钮即可。但是，当我隐藏我的2003内容并试图追加我的2004内容时，滑块无法正常工作，它不会自动滑动或通过点击滑动。

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

有没有人知道解决方案，或者我怎么能以不同的方式解决这个问题？

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

的index.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.”</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

// new rotate

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();
});

Answer 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();
});

当我隐藏并显示新内容时，jQuery Rotater失败

1 个答案: