实验一、实现官网轮播图
【实验内容】
本实验主要是运用html、css、bootstrap实现官网轮播图，运用swiper实现轮播图的轮播效果。
【实验目的】
1、熟悉swiper插件实现轮播图；
2、运用html标签并结合swiper插件实现轮播图的布局；
3、css设置轮播图样式；
4、swiper的javascript功能块应用，实现轮播图的轮播；
【实验步骤】
步骤1 swiper插件下载的文件引入，通过sweper官网了解它的应用；
步骤2 使用html标签并结合swiper插件实现轮播图的布局；
步骤3 css设置轮播图样式；
步骤4 swiper的javascript功能块应用，实现轮播图的轮播；
步骤1 swiper插件的引入
在head标签里插入css，在body标签底部插入js。
<head> <link type="text/css" rel="stylesheet" href="css/bootstrap-3.3.7.min.css"> <link type="text/css" rel="stylesheet" href="css/font-awesome-4.2.0.min.css"> <link rel="stylesheet" type="text/css" href="css/common.css"/> <link rel="stylesheet" type="text/css" href="css/index.css"/> <link rel="stylesheet" href="css/swiper-3.4.2.min.css" /> </head> <body> <script src="js/bootstrap-3.3.7.min.js"></script> <script src="js/swiper-3.4.2.jquery.min.js"></script> </body>
步骤2 使用html标签并结合swiper插件实现轮播图的布局
<body> <!--首页轮播图--> <div class="swiper1"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="images/banner1.jpg" alt="banner1"> <div class="swiper1-text"> <h2>遇见数据，遇见未来</h2> <p>达观致力于为企业挖掘数据蕴藏的价值，提升企业经营业绩</p> <p><a href="#2">了解更多</a></p> </div> </div> <div class="swiper-slide"> <img src="images/banner2.jpg" alt="banner2"> <div class="swiper1-text"> <h2>大数据技术服务专家</h2> <p>国际数据挖掘冠军团队为企业提供大数据技术服务</p> <p><a href="#2">了解更多</a></p> </div> </div> <div class="swiper-slide"> <img src="images/banner3.jpg" alt="banner3"> <div class="swiper1-text"> <h2>成熟的行业大数据解决方案</h2> <p>精准洞察分析不同行业的数据特点，高效解决行业痛点，释放数据价值</p> <p><a href="#1">了解更多</a></p> </div> </div> </div> <!--分页器--> <div class="swiper-pagination swiper-pagination1"></div> </div> <!--轮播图 end--> </body>
步骤3 css设置轮播图样式
css设置轮播图小屏幕时样式，代码如下：
@media only screen and (max-width: 768px) {
.swiper1 img{
height:291px;
}
.swiper1 .swiper1-text{
width:100%;
margin-left:0;
text-align: center;
}
.swiper1 .swiper1-text p:nth-of-type(2){
display: none;
}
.swiper1 .swiper1-text h2{
margin-top:0;
font-size: 20px;
}
.swiper1 .swiper1-text p{
font-size: 12px;
}
}
css设置样式完整代码如下：
.swiper1{
position: relative;
z-index: 0;
overflow: hidden;
}
.swiper1 img{
height:583px;
}
.swiper1 .swiper1-text{
position: absolute;
top:28%;
margin-left:165px;
text-align: left;
background: none;
}
.swiper1 .swiper1-text h2{
font-size: 40px;
}
.swiper1 .swiper1-text p{
margin:30px 0;
margin-bottom: 45px;
font-size:16px;
}
.swiper1 .swiper1-text p a{
padding:12px 48px;
border:1px solid white;
color:white;
text-shadow: none;
}
.swiper1 .swiper1-text p a:hover{
background-color: white;
color:blue;
}
.swiper-pagination1{
bottom:30px !important;
}
@media only screen and (max-width: 768px) {
.swiper1 img{
height:291px;
}
.swiper1 .swiper1-text{
width:100%;
margin-left:0;
text-align: center;
}
.swiper1 .swiper1-text p:nth-of-type(2){
display: none;
}
.swiper1 .swiper1-text h2{
margin-top:0;
font-size: 20px;
}
.swiper1 .swiper1-text p{
font-size: 12px;
}
}
步骤4 swiper的javascript功能块应用，实现轮播图的轮播
<script type="text/javascript">
$(function() {
var mySwiper1 = new Swiper('.swiper1',{
direction: 'horizontal', //水平滑动
loop: true, //无限循环
grabCursorableOnInteraction:true,
autoplay:3000,
pagination: '.swiper-pagination',//分页器
})
})
</script>
最终效果如下图：
