jquery无缝滚动

image.png

html部分

<div class="ct">
    <ul class="img-ct">
        <li><a href="#"><div>
            <div class="img"><img src="images/1.jpg" alt=""><div class="text"><p>入住/退房日期</p><span>2018-01-12</span><b>More</b></div></div>
            <div class="img"><img src="images/2.jpg" alt=""><div class="text"><p>入住/退房日期</p><span>2018-01-12</span><b>More</b></div></div>
            <div class="img"><img src="images/3.jpg" alt=""><div class="text"><p>入住/退房日期</p><span>2018-01-12</span><b>More</b></div></div>
            <div class="img"><img src="images/4.jpg" alt=""><div class="text"><p>入住/退房日期</p><span>2018-01-12</span><b>More</b></div></div>
            <div class="img"><img src="images/5.jpg" alt=""><div class="text"><p>入住/退房日期</p><span>2018-01-12</span><b>More</b></div></div>
        </div></a></li>

        <li><a href="#"><div>
            <div class="img"><img src="images/5.jpg" alt=""><div class="text"><p>入住/退房日期</p><span>2018-01-12</span><b>More</b></div></div>
            <div class="img"><img src="images/6.jpg" alt=""><div class="text"><p>入住/退房日期</p><span>2018-01-12</span><b>More</b></div></div>
            <div class="img"><img src="images/7.jpg" alt=""><div class="text"><p>入住/退房日期</p><span>2018-01-12</span><b>More</b></div></div>
            <div class="img"><img src="images/8.jpg" alt=""><div class="text"><p>入住/退房日期</p><span>2018-01-12</span><b>More</b></div></div>
            <div class="img"><img src="images/7.jpg" alt=""><div class="text"><p>入住/退房日期</p><span>2018-01-12</span><b>More</b></div></div>
        </div></a></li>

    </ul>
    <a class = 'pre  arrow' href="#"><</a>
    <a class = 'next arrow' href="#">></a>

</div>

css部分

 html,body,ul,li{
            padding:0;
            margin:0;
        }
        a{
            text-decoration:none;
        }
        li{
            list-style:none;
        }
        .ct{
            margin: 10px auto;
            width:1258px;
            height:352px;
            position:relative;
            overflow:hidden;
        }

        .img-ct{
            position:absolute;

        }
        .img-ct:after{
            clear:both;
            content:'';
            display:block;
        }
        .img-ct li{
            float:left;
            width:1258px;
            height:352px;
        }
        .img-ct img{
            width:222px;
            height:175px;
        }
        .img-ct div.img{
            float: left;
            width:222px;
            height:350px;
            box-shadow: 0 0 8px #aaa;
            margin-right: 30px;
            margin-left: 5px;
        }
        .img-ct div.text>p{
            margin: 10px;
            color: #000;
            font: 1rem a;
        }
        .img-ct div.text>span{
            display: block;
            margin: 10px;
            color:#999;
            font-size: .8rem;
        }
        .img-ct div.text>b{
            width: 60px;
            text-align: center;
            display: inline-block;
            margin: 15px 10px;
            font-weight: 400;
            padding: 5px 15px;
            border: 1px solid #999;
            color:#999;
            font-size: .8rem;
        }
        .img-ct li .img:last-child{
            margin-right: 0px;
        }
        .arrow{
            position:absolute;
            top:50%;
            height:50px;
            width:40px;
            text-align:center;
            line-height:50px;
            font-size:20px;
            margin-top:-20px;
            background-color:#4E443C;
            color:#fff;
            opacity:0.5;
        }
        .arrow:hover{
            opacity:1;
        }
        .pre{
            left:0px;
        }
        .next{
            right:0px;
        }
        .nav li{
            display:inline-block;
            width:20px;
            height:5px;
            border-radius:2px;
            background-color:#fff;
            cursor: pointer;
        }

js部分

 var $ct=$('.img-ct'),
        $items=$ct.children(),
        $pre=$('.pre'),
        $next=$('.next'),
        imgCount=$items.size(),
        imgWidth=$items.width();

        $ct.append($items.first().clone());
        $ct.prepend($items.last().clone());
        var newCount=$ct.children().size();
        $ct.css({left:0-imgWidth,width:newCount*imgWidth});
        $next.click(function(){
        playnext();

    })
    $pre.click(function(){
        playpre();
    })
    var curidx =0;
    var mov = 1;
    var lock=false;

    function playnext(){
        $ct.animate({left:'-='+mov*imgWidth},function(){
            curidx+=mov;
            if(curidx===imgCount){
                $ct.css({left:0-imgWidth});
                curidx=0;
            }
        })
    }

    function playpre(){
        $ct.animate({left:'+='+mov*imgWidth},function(){
            curidx-=mov;
            if(curidx===(-1)){
                $ct.css({left:0-imgWidth*imgCount});
                curidx=3;
            }
        })
    }
    var timer = setInterval('playnext()',2000);

    $('.ct').hover(function () {
        clearInterval(timer);
    },function () {
        timer = setInterval('playnext()',2000);
    });