如何使滑块自动移动[关闭]

Posted 2023-03-06

【中文标题】如何使滑块自动移动[关闭]

【英文标题】：How to make slider move automatically [closed]

【发布时间】：2019-09-28 07:50:16

【问题描述】：

我想让这个滑块自动移动，因为我在底部使用了一些 javascript 代码，请帮助我解决这个问题，以便我可以让这个滑块自动移动

        <div class="wrapper">

            <ul id="sb-slider" class="sb-slider">
                <li>
                    <a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/banner4.jpg" /></a>
                    <div class="sb-description">
                        <h3>Creative Lifesaver</h3>
                    </div>
                </li>
                <li>
                    <a href="http://www.flickr.com/photos/strupler/2968268187" target="_blank"><img src="images/banner4.jpg" /></a>
                    <div class="sb-description">
                        <h3>Honest Entertainer</h3>
                    </div>
                </li>
                <li>
                    <a href="http://www.flickr.com/photos/strupler/2968114825" target="_blank"><img src="images/banner4.jpg" /></a>
                    <div class="sb-description">
                        <h3>Brave Astronaut</h3>
                    </div>
                </li>
                <li>
                    <a href="http://www.flickr.com/photos/strupler/2968122059" target="_blank"><img src="images/banner4.jpg" /></a>
                    <div class="sb-description">
                        <h3>Affectionate Decision Maker</h3>
                    </div>
                </li>
                <li>
                    <a href="http://www.flickr.com/photos/strupler/2969119944" target="_blank"><img src="images/banner4.jpg" /></a>
                    <div class="sb-description">
                        <h3>Faithful Investor</h3>
                    </div>
                </li>
                <li>
                    <a href="http://www.flickr.com/photos/strupler/2968126177" target="_blank"><img src="images/banner4.jpg" /></a>
                    <div class="sb-description">
                        <h3>Groundbreaking Artist</h3>
                    </div>
                </li>
                <li>
                    <a href="http://www.flickr.com/photos/strupler/2968945158" target="_blank"><img src="images/banner4.jpg" /></a>
                    <div class="sb-description">
                        <h3>Selfless Philantropist</h3>
                    </div>
                </li>
            </ul>

            <div id="shadow" class="shadow"></div>

            <div id="nav-arrows" class="nav-arrows">
                <a href="#">Next</a>
                <a href="#">Previous</a>
            </div>

            <div id="nav-dots" class="nav-dots">
                <span class="nav-dot-current"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>

        </div><!-- /wrapper -->
    </div>

使用的javascript：

$(function() 

        var Page = (function() 

            var $navArrows = $( '#nav-arrows' ).hide(),
                $navDots = $( '#nav-dots' ).hide(),
                $nav = $navDots.children( 'span' ),
                $shadow = $( '#shadow' ).hide(),
                slicebox = $( '#sb-slider' ).slicebox( 
                    onReady : function() 

                        $navArrows.show();
                        $navDots.show();
                        $shadow.show();

                    ,
                    onBeforeChange : function( pos ) 

                        $nav.removeClass( 'nav-dot-current' );
                        $nav.eq( pos ).addClass( 'nav-dot-current' );

                    
                 ),

                init = function() 

                    initEvents();

                ,
                initEvents = function() 

                    // add navigation events
                    $navArrows.children( ':first' ).on( 'click', function() 

                        slicebox.next();
                        return false;

                     );

                    $navArrows.children( ':last' ).on( 'click', function() 

                        slicebox.previous();
                        return false;

                     );

                    $nav.each( function( i ) 

                        $( this ).on( 'click', function( event ) 

                            var $dot = $( this );

                            if( !slicebox.isActive() ) 

                                $nav.removeClass( 'nav-dot-current' );
                                $dot.addClass( 'nav-dot-current' );

                            

                            slicebox.jump( i + 1 );
                            return false;

                         );

                     );

                ;

                return  init : init ;

        )();

        Page.init();

    );

【问题讨论】：

请向我们展示您的尝试。这个问题太笼统了。

请阅读minimal reproducible example，然后更正您的答案。 SO 不是免费的代码服务，您必须自己搜索、编码，如果出现错误，请在此处显示您的相关代码

【参考方案1】：

请检查我更改代码也许它会为你工作 -

<div class="container">

  <div class="wrapper" style="overflow:auto;height:200px">

    <ul id="sb-slider" class="sb-slider">
      <li>
        <a href="http://www.flickr.com/photos/strupler/2969141180" target="_blank"><img src="images/banner4.jpg"  /></a>
        <div class="sb-description">
          <h3>Creative Lifesaver</h3>
        </div>
      </li>
      <li>
        <a href="http://www.flickr.com/photos/strupler/2968268187" target="_blank"><img src="images/banner4.jpg"  /></a>
        <div class="sb-description">
          <h3>Honest Entertainer</h3>
        </div>
      </li>
      <li>
        <a href="http://www.flickr.com/photos/strupler/2968114825" target="_blank"><img src="images/banner4.jpg"  /></a>
        <div class="sb-description">
          <h3>Brave Astronaut</h3>
        </div>
      </li>
      <li>
        <a href="http://www.flickr.com/photos/strupler/2968122059" target="_blank"><img src="images/banner4.jpg"  /></a>
        <div class="sb-description">
          <h3>Affectionate Decision Maker</h3>
        </div>
      </li>
      <li>
        <a href="http://www.flickr.com/photos/strupler/2969119944" target="_blank"><img src="images/banner4.jpg"  /></a>
        <div class="sb-description">
          <h3>Faithful Investor</h3>
        </div>
      </li>
      <li>
        <a href="http://www.flickr.com/photos/strupler/2968126177" target="_blank"><img src="images/banner4.jpg"  /></a>
        <div class="sb-description">
          <h3>Groundbreaking Artist</h3>
        </div>
      </li>
      <li>
        <a href="http://www.flickr.com/photos/strupler/2968945158" target="_blank"><img src="images/banner4.jpg"  /></a>
        <div class="sb-description">
          <h3>Selfless Philantropist</h3>
        </div>
      </li>
    </ul>

    <div id="shadow" class="shadow"></div>

    <div id="nav-arrows" class="nav-arrows">
      <a href="#">Next</a>
      <a href="#">Previous</a>
    </div>

    <div id="nav-dots" class="nav-dots">
      <span class="nav-dot-current"></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </div>

  </div>
  <!-- /wrapper -->
</div>