轮播插件

　　轮播组件，我认一个很重要的一个插件，因为在网上经常能看到，不知道在现在的网页制作中，是否还会使用这个技术。

　　但是它有一个比较重要的条件，那就是这些图片大小必须要是一样的大小的，不然会出现切换的时候会有白边出现。

　　还有一个问题是这个插件的左右两边会有黑色的涂层出现，这是我觉得不好的地方，目前还不知道如何把它去除。

<!DOCTYPE html>

<html>
<head>
    <title>轮播插件</title>
    <meta charset = 'utf-8'>
    <link rel = 'stylesheet' href = 'https://files.cnblogs.com/files/reverse-2016-12-27/bootstrap.min.css'>
    <meta name = 'viewport' content = 'width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'>
</head>
<body>
    
    <div class = 'carousel slide' id = 'myCarousel' style = 'width:294px' data-ride = 'carousel' data-interval = '500'>
        <ol class = 'carousel-indicators'>
            <li data-target = '#myCarousel' class = 'active' data-slide-to = '0'></li>
            <li data-target = '#myCarousel' data-slide-to = '1'></li>
            <li data-target = '#myCarousel' data-slie-to = '2'></li>
        </ol>
        <div class = 'carousel-inner'>
            <div class = 'item active'>
                <img src = '图1.jpg' alt = '第一'>
                <div class = 'carousel-caption'>
                    <h3>第一</h3>
                    <p>这是第一张图片</p>
                </div>
            </div>
            <div class = 'item'>
                <img src = '图2.jpg' alt = '第二'>
                <div class = 'carousel-caption'>
                    <h3>第二</h3>
                    <p>第二张图片</p>
                </div>
            </div>
            <div class = 'item'>
            <a href = 'http:www.baidu.com'>    <img src = '图3.jpg' alt = '第三'></a>
                <div class = 'carousel-caption'>
                    <h3>第三</h3>
                    <p>这是第三张</p>
                </div>
            </div>
        </div>

　　　　　　<a href = '#myCarousel' data-slide = 'prev' class = 'carousel-control left'>&lsaquo;</a>
　　　　　　<a href = '#myCarousel' data-slide = 'next' class = 'carousel-control right'>&rsaquo;</a>

    </div>
    
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>

<script>
   /* var val = 'block';
    function dis(){
        val = val == 'block'?'none':'block';
        $('#myCarousel').css({
            'display':val,
        })
        setTimeout(arguments.callee,500);
    }
    dis(); 
*/
</script>


</body>
</html>

 

posted @ 2017-01-03 19:03  迷人的小妖精  阅读(273)  评论(0)  编辑  收藏  举报