自动滑动和子弹导航滑动之间的冲突（一次只能使用一个）

时间：2015-09-10 22:11:05

标签： javascript jquery html css

我是Jquery的新手，我试图创建自己的滑块

  1. 以给定的时间间隔自动滑动
  2. 点击项目符号导航时滑动
  3. 自动幻灯片运行时导航活动状态会自动更改
  4. 当用户点击项目符号导航时，活动链接会发生变化。

    5. 我试过的代码如下。原谅如果它不直接和简单，因为我是新手。我在Jquery中评论过的部分是用于自动滑动。

    问题：当我取消注释自动滑动代码时，项目符号导航无法正常工作，反之亦然。一次只能使用一个。请帮我解决一下这个。谢谢。

    https://jsfiddle.net/Kowshikan/ac46y9do/

    HTML： 

     <div id="newsFeed">
 <h3> Our Latest News </h3>
    <ul id="slideBox">
        <!--  slide 1 -->
        <li id="1"> 
            Content 1
        </li>

        <!--  slide 2 -->
        <li id="2">     
            Content 2
        </li>

        <!--  slide 3 -->
        <li id="3"> 
            Content 3
        </li>

        <!--  slide 4 -->
        <li id="4"> 
            Content 4
        </li>

        <!--  slide 5 -->
        <li id="5"> 
            Content 5
        </li>
        <div class="clearfix"> </div>
    </ul>

    <!--  Pagination -->
    <div class="pager">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <div class="clearfix"> </div>
    </div>
</div>

    CSS： 

    #newsFeed
{
    overflow: hidden;
}
#slideBox
{
    overflow: hidden;
    padding: 0;
    position: relative;
    margin-bottom: 0;
}
#slideBox li
{
    border: 1px solid #ccc;
    list-style-type: none;
    float: left;
    padding: 10px;
    min-height: 336px;
}
.pager
{
    margin: 0;
    text-align: left;
    background-color: #F5F5F5;
    min-height: 65px;
    border: 1px solid #ccc;
    border-top: 0 !important;
    position: relative;
}
.pager ul
{
    padding: 10px;
}
.pager a 
{
    color: #444 !important;
    font-weight: bold;
    font-size: 11px;
    display: block;
    padding: 5px 10px;
    background: linear-gradient(center top , #FFF 0%, #F0F0F0 100%) repeat scroll 0% 0% transparent;
    background: -webkit-linear-gradient(center top , #FFF 0%, #F0F0F0 100%) repeat scroll 0% 0% transparent;
    background: -moz-linear-gradient(center top , #FFF 0%, #F0F0F0 100%) repeat scroll 0% 0% transparent;
    border: 1px solid #ccc;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.pager a:hover
{
    text-decoration: none;
}
.pagerActive
{
    background: linear-gradient(center top , #eeeeee 0%, #ffffff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    background: -webkit-linear-gradient(center top , #eeeeee 0%, #ffffff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    background: -moz-linear-gradient(center top , #eeeeee 0%, #ffffff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    border: 1px solid #bbbbbb !important;
}
.pager li
{
    cursor: pointer;
    color: #777;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background: linear-gradient(center top , #FFF 0%, #EEE 100%) repeat scroll 0% 0% transparent;
    background: -webkit-linear-gradient(center top , #FFF 0%, #EEE 100%) repeat scroll 0% 0% transparent;
    background: -moz-linear-gradient(center top , #FFF 0%, #EEE 100%) repeat scroll 0% 0% transparent;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 3px;
}
.pager li:hover
{
    border: 1px solid #aaaaaa;
}

    JQUERY： 

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript"> 
    $(document).ready(function(){
        totalslide = $('#slideBox li').length;
        slidewidth = $('#newsFeed').width();
        var totalwidth = slidewidth * totalslide;
        $('#slideBox').css({'width': totalwidth});
        $('#slideBox li').css({'width': slidewidth});
        $('.pager li:first').addClass('pagerActive');

        /* setInterval(function () {
                autoslide();
        }, 2000); */

        $('.pager li').click(function(){
            var slide = ($(this).html() - 1) * slidewidth;
            $('#slideBox').animate({right: slide}, 500);
            $('.pager li').removeClass('pagerActive');
            $(this).addClass('pagerActive');
        });
    });

    /* function autoslide() 
    {
        $('#slideBox li').each(function(index){
            $('#slideBox').delay(2000).animate({right: slidewidth*index}, 500);
        });
    } */

</script>

1 个答案:

答案 0 :(得分：1)

需要更改以使其正常工作：

  • 不要为每个li元素调用动画，一次就足够了。
  • 如果您已经设置了间隔，请不要延迟动画。
  • 通知您的autoslide()功能是活动幻灯片，因此可以正常传递到下一个功能。

您可以考虑改变：

  • 如果autoslide()和$('.pager li').click(function()都要做同样的工作，请将该代码隔离在一个单独的函数中。
  • 在计算totalwidth的{​​{1}}时，请注意您没有考虑幻灯片的'#slideBox'和padding。由于它们不适合内部，最后一个跳到下一行。
  • 我建议为 id 属性提供更多自解释名称。

我给你留下了所有这些变化的片段：

border
var totalslide = $( '#slideBox li' ).length;
var slidePadding = parseInt( $( '#slideBox li' ).css( 'padding-left' ) );
var slideBorder = parseInt( $( '#slideBox li' ).css( 'border-left-width' ) );
var slidewidth = $( '#newsFeed' ).width();
var slideRealWidth = slidewidth + 2 * ( slidePadding + slideBorder );
var totalwidth = totalslide * slideRealWidth;

$( '#slideBox' ).css( {'width': totalwidth} );
$( '#slideBox li' ).css( {'width': slidewidth} );
$( '.pager li:first' ).addClass( 'pagerActive' );

setInterval( function () {
    autoslide();
}, 2000 ); 

function setActiveSlide ( activePager ) {
    $( '.pager li' ).removeClass( 'pagerActive' );
    $( '#pager' + activePager ).addClass( 'pagerActive' );
    var currentWidth = slideRealWidth * ( activePager - 1 );
    $( '#slideBox' ).animate( {right: currentWidth }, 500);
}

$( '.pager li' ).click (function() {
    var activePager = parseInt( $(this).html() );
    setActiveSlide( activePager );
});

function autoslide() {
    var activePager = parseInt( $('.pagerActive').html() );
    var nextPager = ( activePager > 4 )? 1 : activePager + 1;
    setActiveSlide( nextPager );
}
#newsFeed {
    overflow: hidden;
}
#slideBox {
    overflow: hidden;
    padding: 0;
    position: relative;
    margin-bottom: 0;
}
#slideBox li {
    border: 1px solid #ccc;
    list-style-type: none;
    float: left;
    padding: 5px;
    min-height: 50px;
}
.pager {
    margin: 0;
    text-align: left;
    background-color: #F5F5F5;
    min-height: 65px;
    border: 1px solid #ccc;
    border-top: 0 !important;
    position: relative;
}
.pager ul {
    padding: 10px;
}
.pager a {
    color: #444 !important;
    font-weight: bold;
    font-size: 11px;
    display: block;
    padding: 5px 10px;
    background: linear-gradient(center top, #FFF 0%, #F0F0F0 100%) repeat scroll 0% 0% transparent;
    background: -webkit-linear-gradient(center top, #FFF 0%, #F0F0F0 100%) repeat scroll 0% 0% transparent;
    background: -moz-linear-gradient(center top, #FFF 0%, #F0F0F0 100%) repeat scroll 0% 0% transparent;
    border: 1px solid #ccc;
    text-align: center;
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.pager a:hover {
    text-decoration: none;
}
.pagerActive {
    background: linear-gradient(center top, #eeeeee 0%, #ffffff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    background: -webkit-linear-gradient(center top, #eeeeee 0%, #ffffff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    background: -moz-linear-gradient(center top, #eeeeee 0%, #ffffff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0) !important;
    border: 1px solid #bbbbbb !important;
}
.pager li {
    cursor: pointer;
    color: #777;
    width: 30px;
    height: 30px;
    border: 1px solid #ccc;
    background: linear-gradient(center top, #FFF 0%, #EEE 100%) repeat scroll 0% 0% transparent;
    background: -webkit-linear-gradient(center top, #FFF 0%, #EEE 100%) repeat scroll 0% 0% transparent;
    background: -moz-linear-gradient(center top, #FFF 0%, #EEE 100%) repeat scroll 0% 0% transparent;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 3px;
}
.pager li:hover {
    border: 1px solid #aaaaaa;
}

希望它有所帮助！

<强>更新：

根据您的评论中的要求，我将解释以下代码。顺便说一句，既然你让我思考它，那么替换<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="newsFeed"> <h3> Our Latest News </h3> <ul id="slideBox"> <!-- slide 1 --> <li id="slide1"> Content 1 </li> <!-- slide 2 --> <li id="slide2"> Content 2 </li> <!-- slide 3 --> <li id="slide3"> Content 3 </li> <!-- slide 4 --> <li id="slide4"> Content 4 </li> <!-- slide 5 --> <li id="slide5"> Content 5 </li> <div class="clearfix"> </div> </ul> <!-- Pagination --> <div class="pager"> <ul> <li id="pager1">1</li> <li id="pager2">2</li> <li id="pager3">3</li> <li id="pager4">4</li> <li id="pager5">5</li> </ul> <div class="clearfix"> </div> </div> </div>的{​​{1}}就更加优雅和可维护。

> 4
相关问题
最新问题