重构首页广告层的HTML代码
广告层的HTML代码如下：
<div class="swiper-container">
<div class="swiper-wrapper" style="width: 100%;height:675px;">
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
往广告层里面添加图片
添加广告图片的JavaScript代码如下：
<script>
$.each(images, function(i,image) {
$(".swiper-wrapper").append("<div class='swiper-slide' style='width:100%;height:100%;background: url("+image+") no-repeat 50%;background-size:cover'></div>");
});
</script>
引入Swiper的CSS框架
代码如下：
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
引入Swiper的JS框架
代码如下：
<script type="text/javascript" src="js/swiper.min.js" ></script>
初始化Swiper
autoplay设置为true表示自动切换（默认间隔时长为3秒）。
初始化滑块的JS代码如下：
<script>
var mySwiper = new Swiper ('.swiper-container', {
autoplay: true,
direction: 'horizontal',
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
/*
scrollbar: {
el: '.swiper-scrollbar',
},
*/
})
</script>
测试数据
使用数组保存用于测试的广告图片。
data.js文件的代码如下：
var images=["img/20180907001.jpg","img/20180912002.jpg","img/20180912003.jpg"];
引入该JS文件，代码如下：
<script type="text/javascript" src="js/data.js" ></script>
使用浏览器浏览
swiper0912_03.gif
附上完整代码
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/swiper.min.js" ></script>
<script type="text/javascript" src="js/data.js"></script>
<style>
.menu{
height:80px;
margin-bottom:3px;
}
a{
text-decoration:none;
font-size:20px;
color:black;
}
a.current{
color:#fff;
}
ul.first{
list-style-type:none;
margin-top:0;
padding-left:0;
height:80px;
}
ul.second{
list-style-type:none;
margin-top:0;
padding-left:0;
}
li.first{
display:inline-block;
width:19.5%;
text-align:center;
height:80px;
line-height:80px;
border:1px solid red;
}
li.first:nth-child(1){
background-color:#e95a1a;
}
li.first:hover div{
display:block;
}
li.first:hover > a{
color:#fff;
}
li.first:hover{
background-color:#e95a1a;
}
li.second{
display:inline-block;
text-align:center;
margin-right:2px;
border:1px solid red;
}
li.second a{
padding:0 55px;
}
li.second a:hover{
color:#e95a1a;
}
li div{
display:none;
background:url(img/menubg.png) repeat;
height: 56px;
line-height: 52px;
left: 0;
position: absolute;
top: 90px;
width: 100%;
text-align: center;
z-index: 999;
}
</style>
</head>
<body>
<div class="header">
<div class="menu">
<ul class="first">
<li class="first">
<a href="#" class="current">首页</a>
</li>
<li class="first">
<a href="#">产品中心</a>
<div>
<ul class="second">
<li class="second"><a href="#">企业版</a></li>
<li class="second"><a href="#">工作流</a></li>
<li class="second"><a href="#">移动应用</a></li>
<li class="second"><a href="#">云服务</a></li>
</ul>
</div>
</li>
<li class="first">
<a href="#">案例中心</a>
<div>
<ul class="second">
<li class="second"><a href="#">人工智能</a></li>
<li class="second"><a href="#">互联网</a></li>
<li class="second"><a href="#">移动支付</a></li>
<li class="second"><a href="#">金融证券</a></li>
<li class="second"><a href="#">医疗保险</a></li>
</ul>
</div>
</li>
<li class="first">
<a href="#">服务支持</a>
<div>
<ul class="second">
<li class="second"><a href="#">服务流程</a></li>
<li class="second"><a href="#">服务内容</a></li>
<li class="second"><a href="#">服务宗旨</a></li>
</ul>
</div>
</li>
<li class="first">
<a href="#">关于我们</a>
<div>
<ul class="second">
<li class="second"><a href="#">公司介绍</a></li>
<li class="second"><a href="#">公司荣誉</a></li>
<li class="second"><a href="#">新闻中心</a></li>
<li class="second"><a href="#">招纳贤士</a></li>
<li class="second"><a href="#">联系我们</a></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="swiper-container">
<div class="swiper-wrapper" style="width: 100%;height:675px;">
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
<script>
$.each(images, function(i,image) {
$(".swiper-wrapper").append("<div class='swiper-slide' style='width:100%;height:100%;background: url("+image+") no-repeat 50%;background-size:cover'></div>");
});
</script>
<script>
var mySwiper = new Swiper ('.swiper-container', {
autoplay: true,
direction: 'horizontal',
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
/*
scrollbar: {
el: '.swiper-scrollbar',
},
*/
})
</script>
</body>
</html>
参考资料
https://www.swiper.com.cn/usage/index.html
http://www.cnblogs.com/darkchii/p/7464579.html
网友评论