点击左右滚动 jquery

实现效果:

左右箭头点击切换，HTML结构：UL是宽度是固定的几个LI的总和（一排），UL的上一级元素居中固定宽度比如1200px,设置超出隐藏

1.向右点击，每次左移动（marginLeft）都是

 

 

 

******************************************************************************************************************************

以下是相关实例代码元素

首先引用jquery

 此效果展示：

 

问题需要解决：

1.只实现点击滚动，没有实现自动滚动效果；

2.当到了头部，在此点击向前滚动（向左），会发生抖动，已经到了第一个，点击应该是没有反应，这里会发生切换；

这里点击多次，在第一个的时候，再去点击向后滚动， 第一次点击没有反应，不会向后滚动，再次点击，会发生多次点击向后的效果 ，看到的是三次向后滚动；猜测是点击事件队列，没有反应过来，前面的事件没有执行完；

向后快速点击多次，同样容易发生没有反应的情况。

滚动的原理

根据整个长条ul列表 ，点击一次向前移动一个小内容块，也就是移动LI标签，

关键地方处理：最后一个从新回到第一个的时候，移动一次就把移动的内容块放到最后面，这样顺序一直保持不变；

 

 

 自动滚动JS

  /*自动执行*/

        timer = setInterval(function(){  nextscroll();}, 5000);
        $(".main_visual").hover(function() {
            clearInterval(timer);
        }, function() {
            timer = setInterval(function(){  nextscroll();}, 5000);
        });

　　

 

 

JS

 $(function(){
        /*======右按钮======*/
        $(".arrow-right").click(function(){
            nextscroll();
        });
        function nextscroll(){
            var vcon = $(".list-case");
            var offset = ($(".list-case li").width()*-1);
            vcon.stop().animate({marginLeft:offset},"slow",function(){

                var firstItem = $(".list-case ol li").first();
                vcon.find(".list-case-anli").append(firstItem);
                $(this).css("margin-left","0px");
            });
        };
        /*========左按钮=========*/
        $(".arrow-left").click(function(){
            var vcon = $(".list-case");
            var offset = ($(".list-case li").width()*-1);
            var lastItem = $(".list-case ol li").last();

            vcon.find(".list-case-anli").prepend(lastItem);
            vcon.css("margin-left",offset);
            vcon.animate({marginLeft:"0px"},"slow")
        });
    });

HTML结构

　

<div class="Case">
    <div class="center case-center">
        <div class="list-case">
            <ol class="list-case-anli">
                <li>
                    <a href="javascript:void(0)" class="friendlink1"></a>
                    <a href="javascript:void(0)" class="friendlink2"></a>
                    <a href="javascript:void(0)" class="friendlink3"></a>
                    <a href="javascript:void(0)" class="friendlink4"></a>
                    <a href="javascript:void(0)" class="friendlink5 end"></a>
                    <a href="javascript:void(0)" class="friendlink6"></a>
                    <a href="javascript:void(0)" class="friendlink7"></a>
                    <a href="javascript:void(0)" class="friendlink8"></a>
                    <a href="javascript:void(0)" class="friendlink9"></a>
                    <a href="javascript:void(0)" class="friendlink10 end"></a>
                </li>
                <li>
                    <a href="javascript:void(0)" class="friendlink4"></a>
                    <a href="javascript:void(0)" class="friendlink4"></a>
                    <a href="javascript:void(0)" class="friendlink4"></a>
                    <a href="javascript:void(0)" class="friendlink4"></a>
                    <a href="javascript:void(0)" class="friendlink4 end"></a>
                    <a href="javascript:void(0)" class="friendlink4"></a>
                    <a href="javascript:void(0)" class="friendlink4"></a>
                    <a href="javascript:void(0)" class="friendlink4"></a>
                    <a href="javascript:void(0)" class="friendlink4"></a>
                    <a href="javascript:void(0)" class="friendlink4 end"></a>
                </li>
                <li>
                    <a href="javascript:void(0)" class="friendlink7"></a>
                    <a href="javascript:void(0)" class="friendlink7"></a>
                    <a href="javascript:void(0)" class="friendlink7"></a>
                    <a href="javascript:void(0)" class="friendlink7"></a>
                    <a href="javascript:void(0)" class="friendlink7 end"></a>
                    <a href="javascript:void(0)" class="friendlink7"></a>
                    <a href="javascript:void(0)" class="friendlink7"></a>
                    <a href="javascript:void(0)" class="friendlink7"></a>
                    <a href="javascript:void(0)" class="friendlink7"></a>
                    <a href="javascript:void(0)" class="friendlink7 end"></a>
                </li>
                <li>
                    <a href="javascript:void(0)" class="friendlink6"></a>
                    <a href="javascript:void(0)" class="friendlink6"></a>
                    <a href="javascript:void(0)" class="friendlink6"></a>
                    <a href="javascript:void(0)" class="friendlink6"></a>
                    <a href="javascript:void(0)" class="friendlink6 end"></a>
                    <a href="javascript:void(0)" class="friendlink6"></a>
                    <a href="javascript:void(0)" class="friendlink6"></a>
                    <a href="javascript:void(0)" class="friendlink6"></a>
                    <a href="javascript:void(0)" class="friendlink6"></a>
                    <a href="javascript:void(0)" class="friendlink6 end"></a>
                </li>
            </ol>
        </div>

    </div>

    <a href="javascript:;" class="arrow-left arrow"></a>
    <a href="javascript:;" class="arrow-right arrow"></a>

</div>

　　CSS

Case{
    background: url("../images/newVersion201608/index/index-anli-bg.jpg") center no-repeat;
    height: 500px;
    position: relative;
}

.case-center{
    background: url("../images/newVersion201608/index/index-anli-list.jpg") center no-repeat;
    height: 100%;
    overflow: hidden;
}
.arrow{
    position: absolute;
    width: 40px;
    height: 60px;
    display: block;
    top:50%;
    margin-top: -30px;

}
 .arrow-left{
    background: url("../images/newVersion201608/index/friendlink/arrow_left.png") center no-repeat;
    float: left;
     left: 35px;

}
.arrow-right{
    background: url("../images/newVersion201608/index/friendlink/arrow_right.png") center no-repeat;
    float: right;
    right: 35px;
}
.Case .case-center ol{
    overflow: hidden;
    width: 4800px;
}
.Case .case-center ol li{
    float: left;
    margin: 120px auto 100px auto;
    overflow: hidden;
    width: 1200px;
}
.Case .case-center ol li a{
    display: inline-block;
    margin:0px 21px 20px 0px;
    width: 220px;
    height: 120px;
}
.Case .case-center ol li a.end{
    margin-right: 0px;
}
.Case .case-center ol li a.friendlink1{
    background: url("../images/newVersion201608/index/friendlink/fl1.png") center no-repeat;
}
.Case .case-center ol li a.friendlink2{
    background: url("../images/newVersion201608/index/friendlink/fl2.png") center no-repeat;
}
.Case .case-center ol li a.friendlink3{
    background: url("../images/newVersion201608/index/friendlink/fl3.png") center no-repeat;
}
.Case .case-center ol li a.friendlink4{
    background: url("../images/newVersion201608/index/friendlink/fl4.png") center no-repeat;
}
.Case .case-center ol li a.friendlink5{
    background: url("../images/newVersion201608/index/friendlink/fl5.png") center no-repeat;
}
.Case .case-center ol li a.friendlink6{
    background: url("../images/newVersion201608/index/friendlink/fl6.png") center no-repeat;
}
.Case .case-center ol li a.friendlink7{
    background: url("../images/newVersion201608/index/friendlink/fl7.png") center no-repeat;
}
.Case .case-center ol li a.friendlink8{
    background: url("../images/newVersion201608/index/friendlink/fl8.png") center no-repeat;
}
.Case .case-center ol li a.friendlink9{
    background: url("../images/newVersion201608/index/friendlink/fl9.png") center no-repeat;
}
.Case .case-center ol li a.friendlink10{
    background: url("../images/newVersion201608/index/friendlink/fl10.png") center no-repeat;
}