Javascript 自动滑动和项目符号导航滑动之间的冲突（一次只有一个工作）

我是Jquery新手，我尝试创建自己的滑块，它将

在给定的时间间隔内自动滑动

单击项目符号导航时滑动

运行自动幻灯片时，导航活动状态会自动更改

当用户单击项目符号导航时，活动链接将更改

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

问题：当我取消注释自动滑动代码时，项目符号导航不起作用，反之亦然。一次只工作一个人。请帮我做这个。谢谢。

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>

#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;
}

<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>

JQUERY:

 <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>

#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;
}

<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>

$（文档）.ready（函数（）{
totalslide=$（'#slideBox li'）。长度；
slidewidth=$（“#新闻提要”）.width（）；
var totalwidth=slidewidth*totalslide；
$（'#slideBox'）.css（{'width'：totalwidth}）；
$（'#slideboxli'）.css（{'width'：slidewidth}）；
$（'.pager-li:first'）.addClass（'pagerative'）；
/*setInterval（函数（）{
自动滑动（）；
}, 2000); */
$（'.pager li'）。单击（函数（）{
var slide=（$（this.html（）-1）*slidewidth；
$（#slideBox'）。动画（{右：slide}，500）；
$（'.pager li'）.removeClass（'pagerative'）；
$（this.addClass（'pagerative'）；
});
});
/*函数autoslide（）
{
$（'#slideBox li'）。每个（函数（索引）{
$（#slideBox'）.delay（2000）.动画（{right:slidewidth*index}，500）；
});
} */

您需要更改什么才能使其正常工作：

• 不要为每个

  li

  元素调用动画，一次就足够了
• 如果已经设置了间隔，则不要延迟动画
• 通知您的

  autoslide（）

  函数，它是活动幻灯片，以便可以正确地传递到下一张幻灯片

你可以考虑改变：

• 如果

  autoslide（）

  和

  $（'.pager li'）。单击（function（）

  将使相同的工作，请将该代码隔离在单独的函数中
• 当计算

  “#幻灯片盒”

  的

  总宽度时，请注意，您没有考虑幻灯片的
  填充
  和
  边框
  。因为它们不适合内部，最后一个跳转到下一行

• 我建议为id属性提供更多自解释的名称

我给您留下一个包含所有这些更改的片段：

var totalslide=$（'#slideBox li'）。长度；
var slidePadding=parseInt（$（'slideboxli'）.css（'padding left'）；
var slideboorder=parseInt（$（'#slideboxli'）.css（'border left width'））；
var slidewidth=$（'#newsFeed'）.width（）；
var slideRealWidth=slidewidth+2*（slideadding+slideBorder）；
var totalwidth=totalslide*slideralwidth；
$（'#slideBox'）.css（{'width'：totalwidth}）；
$（'#slideboxli'）.css（{'width'：slidewidth}）；
$（'.pager-li:first'）.addClass（'pagerative'）；
setInterval（函数（）{
自动滑动（）；
}, 2000 ); 
函数setActiveSlide（activePager）{
$（'.pager li'）.removeClass（'pagerative'）；
$（'#pager'+activePager）.addClass（'pagerActive'）；
var currentWidth=slideRealWidth*（activePager-1）；
$（'#slideBox'）。设置动画（{right:currentWidth}，500）；
}
$（'.pager li'）。单击（函数（）{
var activePager=parseInt（$（this.html（））；
设置ActiveSlide（activePager）；
});
函数autoslide（）{
var activePager=parseInt（$（'.pagerative'）.html（））；
var nextpage=（activePager>4）？1:activePager+1；
设置活动幻灯片（下一页）；
}

#新闻提要{
溢出：隐藏；
}
#滑盒{
溢出：隐藏；
填充：0；
位置：相对位置；
页边距底部：0；
}
#幻灯片盒李{
边框：1px实心#ccc；
列表样式类型：无；
浮动：左；
填充物：5px；
最小高度：50px；
}
.寻呼机{
保证金：0；
文本对齐：左对齐；
背景色：#F5；
最小高度：65px；
边框：1px实心#ccc；
边框顶部：0！重要；
位置：相对位置；
}
传呼机{
填充：10px；
}
.寻呼机a{
颜色：#444！重要；
字体大小：粗体；
字体大小：11px；
显示：块；
填充物：5px10px；
背景：线性渐变（中心顶部，#FFF 0%，#F0 100%）重复滚动0%0%透明；
背景：-webkit线性渐变（中间顶部，#FFF 0%，#F0 100%）重复滚动0%0%透明；
背景：-moz线性渐变（中间顶部，#FFF 0%，#F0 100%）重复滚动0%0%透明；
边框：1px实心#ccc；
文本对齐：居中；
位置：绝对位置；
右：10px；
底部：10px；
}
.寻呼机a:悬停{
文字装饰：无；
}
.吸引人的{
背景：线性渐变（中间顶部，#eeeeee 0%，#ffffff 100%）重复滚动0 0 rgba（0,0,0,0）！重要；
背景：-webkit线性渐变（中间顶部，#eeeeee 0%，#ffffff 100%）重复滚动0 0 rgba（0,0,0,0）！重要；
背景：-moz线性渐变（中间顶部，#eeeeee 0%，#ffffff 100%）重复滚动0 0 rgba（0,0,0,0）！重要；
边框：1px实心#bbbbbb！重要；
}
李先生{
光标：指针；
颜色：#777；
宽度：30px；
高度：30px；
边框：1px实心#ccc；
背景：线性渐变（中间顶部，#FFF 0%，#EEE 100%）重复滚动0%0%透明；
背景：-webkit线性渐变（中间顶部，#FFF 0%，#EEE 100%）重复滚动0%0%透明；
背景：-moz线性渐变（中间顶部，#FFF 0%，#EEE 100%）重复滚动0%0%透明；
显示：内联块；
文本对齐：居中；
垂直对齐：中间对齐；
填充：3倍；
}
.李寻呼机：悬停{
边框：1px实心#AAAAA；
}

我们的最新消息