主要是轮播图用的很多,不想每次都去看了。写个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>