jq+bootstrap轮播图demo

主要是轮播图用的很多，不想每次都去看了。写个demo，以下代码可以直接运行

方法一： background写法（html+jq+bootstrap)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<style>
.carousel {
    min-width: 1200px;
}

.carousel-control {
    width: 67px;
    height: 67px;
    transform: translateY(-50%);
    top: 50%;
    margin-top: 0;
    border: 0;
    border-radius: 50%;
    background: none;
}

.carousel-indicators {
    right: 50%;
    top: 100%;
    transform: translateY(-30px);
}

.carousel-indicators li {
    margin-left: 20px !important;
}

.carousel-inner .item {
    width: 100%;
}

.carousel-inner .item>img {
    margin: 0 auto;
}

.carousel-inner .item a {
    display: block;
    background-repeat: no-repeat;
    width: 100%;
    height: 440px;
    background-position: center top;
}

.cursorPointer {
    cursor: pointer;
}
</style>
<body>
    <div id="app">
        
        <div id="myCarousel" class="carousel slide">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="1" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
                <li data-target="#myCarousel" data-slide-to="3"></li>
            </ol>
            <div class="carousel-inner">
                <div class="item active">
                    <a href="" style="background-image: url('http://uploadimg.dev.xuezhong100.cn/admin/20181214/96999a3953784a16b74850cb6293462e.png');"></a>
                </div>
                <div class="item">
                    <a href="" style="background-image: url('http://uploadimg.dev.xuezhong100.cn/admin/20181214/4713cafd62ff4d5a8d67991a072738f0.png');"></a>
                </div>
				<div class="item">
                    <a href="" style="background-image: url('http://uploadimg.dev.xuezhong100.cn/admin/20181214/96999a3953784a16b74850cb6293462e.png');"></a>
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <img src="./img/carousel_left.png" />
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <img src="./img/carousel_right.png" />
                </a>
            </a>
        </div>
    </div>
</body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script>
$('#myCarousel').carousel({
    interval: 1000
})
</script>
</html>

方法二： img写法（vue+jq+bootstrap）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
    <style>
        /* 轮播图的一些设置 */
        #myCarousel {
            min-width: 1200px;
        }
        .carousel-control {
            width: 67px;
            height: 67px;
            transform: translateY(-50%);
            top: 50%;
            margin-top: 0;
            border: 0;
            border-radius: 50%;
            background: none;
        }

        .carousel-indicators {
            right: 50%;
            top: 100%;
            transform: translateY(-30px);
        }

        .carousel-indicators li {
            margin-left: 20px !important;
        }

        .carousel-inner .item>img {
            margin: 0 auto;
        }

        .cursorPointer {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="app">
        <div id="myCarousel" class="carousel slide" v-if="swiperList.length" v-cloak>
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" :data-slide-to="key" :class="{active: key===0}" v-for="(item, key) in swiperList"></li>
            </ol>
            <div class="carousel-inner">
                <div :class="{item, active: key === 0}" v-for="(item, key) in swiperList">
                    <img style="width: 1920px" :src="item">
                </div>
            </div>
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">

                <img src="../img/carousel_left.png" />
                <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                    <img src="../img/carousel_right.png" />
                </a>
            </a>
        </div>
    </div>
</body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script>
// vue.js
'use strict';
var vm = new Vue({
    el: "#app",
    data: function() {
        return {
            // 轮播图
            swiperList: [
                'http://uploadimg.dev.xuezhong100.cn/admin/20181214/96999a3953784a16b74850cb6293462e.png',
                'http://uploadimg.dev.xuezhong100.cn/admin/20181214/4713cafd62ff4d5a8d67991a072738f0.png'
            ]
        }
    },
    mounted: function() {
        $('#myCarousel').carousel({
            interval: 1000
        })
    },
})
</script>
</html>

jq+bootstrap轮播图demo

猜你喜欢