左右无缝滚动（pc）

css文件

*{padding:0; margin:0;list-style: none;}

.banner{margin:100px auto; border: 5px solid #000; width: 600px; height: 350px; overflow: hidden; position: relative;}

.banner .img{width:5000px;position: absolute; left: 0px;  top:0px;}

.banner .img li{float: left; width: 600px;height: 350px;}

.banner .num {position: absolute; width: 100%; bottom:10px; left: 0; text-align: center;font-size: 0px;}

.banner .num li{width: 10px; height: 10px; background-color: #888; border-radius: 50%; display: inline-block; margin:0 3px; cursor: pointer; }

.banner .num li.on{background-color:#F60;}

.banner .btn{width:30px; height: 50px; background: rgba(0,0,0,0.5); position: absolute; top:50%; margin-top: -25px; font-size: 40px; text-align: center; line-height: 50px; color: #FFF; font-family: "宋体"; cursor: pointer;display: none;}

.banner:hover .btn{display:block;}

.banner .btn_l{left:0px;}

.banner .btn_r{right:0px;}

js文件

$(function(){

        var i=0;

        var clone=$(".banner .img li").first().clone();//克隆第一张图片

        $(".banner .img").append(clone);//把克隆好的

        var size=$(".banner .img li").size();

        for(var j=0;j

                $(".banner .num").append("

");

        }

        $(".banner .num li").first().addClass("on");

        //向左移动函数

        function moveL(){

                i++

                if(i>=size){

                        $(".banner .img").css({left:0});

                        i=1;

                }

                $(".banner .img").stop().animate({left:-i*600},500);

                if(i==size-1){

                        $(".banner .num li").eq(0).addClass("on").siblings().removeClass("on");

                }else{

                        $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");

                }

        }

        //向右移动函数

        function moveR(){

                i--;

                if(i<0) {

                        $(".banner .img").css({left:-(size-1)*600})

                        i=size-2;

                }

                $(".banner .img").animate({left:-i*600},500);

                $(".banner .num li").eq(i).addClass("on").siblings().removeClass("on");

         }

        /*鼠标划入圆点*/

        $(".banner .num li").hover(function(){

                    var index = $(this).index();//获取索引值

                    i=index;

                    $(".banner .img").stop().animate({left:-index*600},500);

                    $(this).addClass("on").siblings().removeClass("on");

        });

        /*自动轮播*/

        var t=setInterval(moveL,2000);

        /*对banner定时器的操作*/

        $(".banner").hover(function(){

                clearInterval(t);

        },function(){

                t=setInterval(moveL,2000);

        })

        /*向左的按钮*/

        $(".banner .btn_l").click(moveL);

        /*向右的按钮*/

        $(".banner .btn_r").click(moveR);

});

html文件

        

                

• 

                ....

                

• 

        

        

        

<

        

>