bootstrap-js组件-自定义幻灯片

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="js/jquery.1.12.4.min.js"></script>
    <title>Bootstrap</title>
</head>
<style type="text/css">
    *{
        font-family: 微软雅黑;
    }
    .container{
        width: 1140px;
        padding: 0px 15px;
        margin:  0 auto;
    }
    .carousel{
        height: 238px;
        overflow: hidden;
        position: relative;

    }
    .image_reel{
        position: absolute;
        left: 0px;
        top: 0px;
    }
    .image_reel img{
        float: left;
    } 
    .paging{
        position: absolute;
        bottom: 20px;
        right: 20px;
        display: none;
    }
    .paging a{
        text-decoration: none;
        color: #fff;
        padding: 0px 5px;
    }
    .paging a:hover{
        background: #f40;
        font-weight: bold;
    }
    .paging a.active{
        background: #f40;
        font-weight: bold;
    }
</style>
<body>
    <div class="container">
        <h1 class="page-header">bootstrap</h1>

        <div class="carousel">
            <div class="window">
                <div class="image_reel">
                    <a href="#"><img src="images/lunbo1.jpg" alt=""></a>
                    <a href="#"><img src="images/lunbo2.jpg" alt=""></a>
                    <a href="#"><img src="images/lunbo3.jpg" alt=""></a>
                </div>
            </div>
            <div class="paging">
                <a href="#" rel="1">1</a>
                <a href="#" rel="2">2</a>
                <a href="#" rel="3">3</a>
            </div>

        </div>
    </div>
</body>
<script type="text/javascript">
    $(".paging").show();
    $(".paging a:first").addClass("active");
    // // 获取图片的大小，来设置window 的width，让图片水平排列
    var imageWidth = $(".window").width();//获取一个img的width
    var imageSum = $(".image_reel img").size(); //获取img的数量
    var imageReelWidth = imageWidth*imageSum; //得到总宽度

    $(".image_reel").css({'width':imageReelWidth});//设置总管度



    rotate=function(){
        var triggerID=$active.attr("rel")-1;
        var image_reelPosition= triggerID * imageWidth;

        $('.paging a').removeClass('active');
        $active.addClass('active');

        $(".image_reel").animate({
            left:-image_reelPosition
        },500);
    };

    rotateSwitch=function(){
        play= setInterval(function(){
            $active= $('.paging a.active').next();
            if($active.length===0){
                $active= $('.paging a:first');
            }
            rotate();
        },2000);
    };
    rotateSwitch();


    $(".image_reel a").hover(function(){
        clearInterval(play);
    },function(){
        rotateSwitch();
    });


    //on click
    $(".paging a").click(function(){
        $active= $(this);

        clearInterval(play);
        rotate();
        rotateSwitch();
        return false;
    });

</script>
</html>
这里写图片描述
bootstrap-js组件-自定义幻灯片

猜你喜欢
