左右無縫滾動

原創 debbyDeng 2018-08-29 01:43 
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>bootstrap</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            padding:20px;
        }
        .ads{
            position:relative;
            width:1250px;
            height:250px;
            overflow:hidden;

        }
        .wrap{
            width:3750px;
            height:250px;
            position:absolute;
            left:0;
            top:0;
        }
        .wrap div{
            width:250px;
            height:250px;
            float:left;
            border-right:1px solid #fff;
            color:white;
        }
        .wrap div:nth-child(1){
            background:#d45d5c;
        }
        .wrap div:nth-child(2){
            background:#a4445c;
        }
        .wrap div:nth-child(3){
            background:#1254dd;
        }
        .wrap div:nth-child(4){
            background:#145d5c;
        }
        .wrap div:nth-child(5){
            background:#dddd5c;
        }
        .wrap div:nth-child(6){
            background:#d40d5c;
        }
        .wrap div:nth-child(7){
            background:#f4aa5c;
        }
        .wrap div:nth-child(8){
            background:#a45d34;
        }
        .wrap div:nth-child(9){
            background:#14df5c;
        }
        .wrap div:nth-child(10){
            background:#445d5c;
        }
        .wrap div:nth-child(11){
            background:#d41d5c;
        }
        .wrap div:nth-child(12){
            background:#d45ddd;
        }
        .wrap div:nth-child(13){
            background:#d4521f;
        }
        .wrap div:nth-child(14){
            background:#123d5c;
        }
        .wrap div:nth-child(15){
            background:#dddd5c;
        }
        div.direct button{
            position:absolute;
            width:60px;height:60px;
            background:transparent;
            border:none;
            color:white;
            font-size:x-large;
            top:100px;
            cursor:pointer;
        }
        button.prev{
            left:0;
        }
        button.next{
            right:0;
        }



    </style>
    <script src="../jquery-2.2.4.js" type="text/javascript"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script>
        $(function(){
            function slideR(){
                $(".wrap").animate({left:"-1250px"},500,function(){
                    $(this).append($(".wrap div:lt(5)")).css({left:"0"})
                })
            }
            function slideL(){

                $(".wrap").prepend($(".wrap div:gt(9)"));

                $(".wrap").css({left:"-1250px"}).animate({left:"0"});
                /*
                先將最後一排的圖片移動到最開始，但是初始化時必須在可視區之外，然後利用animate
                動畫來移動到可視區實現向左"無縫"滑動效果。
                
                但這種利用元素剪切來實現無縫效果，元素本身必須對CSS沒什麼特殊性，否則容易造成混亂。
               */

            }
            $("button.next").click(function(){
                slideR();
            });
            $("button.prev").click(function(){
                slideL()
            })
            

        })

    </script>
</head>
<body>
<div class="ads">
    <div class="wrap">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
        <div class="box6">6</div>
        <div class="box7">7</div>
        <div class="box8">8</div>
        <div class="box9">9</div>
        <div class="box10">10</div>
        <div class="box11">11</div>
        <div class="box12">12</div>
        <div class="box13">13</div>
        <div class="box14">14</div>
        <div class="box15">15</div>
    </div>

    <div class="direct">
        <button class="prev">prev</button>
        <button class="next">next</button>
    </div>
</div>

<div class="test">

</div>

</body>
</html>

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章