之前在做项目的时候需要用到轮播的效果，我们公司的前端把页面做好后扔给我，我就开始撸起来了，可结果没想到的是轮播井然失效，死活不能生效，当时各种解决方法都试了就是不管用，最后换了一个轮播js才解决的，想来困扰了我许久，现今已经解决想把这次的经历记录下来！
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
<link rel="stylesheet" type="text/css" href="iconfont/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/com.js" type="text/javascript" charset="utf-8"></script>
<script src="js/base.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="js/my.js" type="text/javascript" charset="UTF-8"></script>-->
<link rel="stylesheet" href="swiper/css/swiper.min.css">
<script src="swiper/js/swiper.min.js"></script>
<script src="js/slider.js"></script>
<style type="text/css">
/* .swiper-container {
width: 900px;
height: 300px;
}*/
.swiper-container {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-pagination-custom {
bottom: 10px;
left: 0;
width: 100%;
}
.swiper-pagination-customs {
width: 10px;
height: 10px;
border-radius: 50%;
display: inline-block;
background: #000;
opacity: .3;
margin: 0 5px;
}
.swiper-pagination-customs-active {
opacity: 1;
background-color: #F78E00;
}
.swiper-wrapper img{width: 100%;margin: .2rem 0;}
.swiper-slide a{width: 100%;margin: 0;}
</style>
<!--<script src="js/slider.js" type="text/javascript" charset="utf-8"></script>-->
</head>
<body style="background: url(img/bbjj.jpg); background-repeat:no-repeat; background-attachment:fixed; background-size:100% 100%;">
<div id="top">
<div class="top">
<div class="left" onclick="javascript:history.back(-1);"><a href="#"><i class="iconfont icon-fanhui"></i></a>
</div>
员工详情
<div class="right"></div>
</div>
</div>
<div class="content">
<div class="aui-m-slider">
<div class="m-slider">
<div class="slider-wrapper">
<div class="swiper-container">
<div class="swiper-wrapper" id="imagesHonor"></div>
<div class="swiper-pagination" id="sliderPoint"></div>
</div>
</div>
</div>
</div>
<div class="grxq">
<div class="name" id="empName"></div>
<div class="shiji" id="imageShow"></div>
<div class="share" id="peopleBescribe"></div>
</div>
</div>
</body>
<script>
var auditionPersonId = $.web.getUrlParam("auditionPersonId");
var url = fwurl + "/icemsRestService/ServieAcition/queryView?serviceName=MCMP01&methodName=queryOneWX";
$.ajax({
dataType: "json",
type: "POST",
url: url,
data: {"auditionPersonId": auditionPersonId},
success: function (data) {
var value = data;
datas = data;
var images = "";
var image = "";
var empName = "";
var empNameShow = "";
var imageShow = "";
var imageShows = "";
var peopleBescribe = "";
var peopleBescribeShow = "";
var sliderPoint = "";
var sliderPoints = "";
//循环数据加载滚动图片
for (var im in value.imagesText) {
image += "<div class=\"swiper-slide box\">\n" +
"<a href=\"javascript:;\">\n" +
"<img src=\"" + value.imagesText[im].savePath + "\"/>\n" +
"</a>\n" +
"</div>\n"
/* sliderPoint += "<span class=\"slider-pagination-item\"></span>"*/
}
$(".swiper-wrapper").html(image);
var mySwiper = new Swiper('.swiper-container', {
irection: 'horizontal',
loop: true,
pagination: {
el: '.swiper-pagination',
dynamicBullets: true,
},
autoplay: true,
speed: 100,
// 如果需要滚动条
effect: 'slide',
})
//员工姓名和所在部门
empName += "<p>" + value.personText[0].empName.slice(0, 1) + "<em>" + value.personText[0].empName.substring(1) + "</em><b>" + value.personText[0].orgName + "</b></p>"
//循环获取该员工的荣誉
for (var i in value.honorText) {
console.log(i);
imageShow += "<dl>\n" +
"\t\t\t\t<dt>" + crtTimeFtt(value.honorText[i].peoHonorTime) + "年<img src=\"img/jiangbei.png\"/></dt>\n" +
"\t\t\t\t<dd>" + value.honorText[i].peoHonor + "</dd>\n" +
"</dl>\n";
}
console.log(imageShow);
//故事分享
peopleBescribe += "<h3>故事<em>分享</em></h3>\n" +
"\t\t\t<p>" + value.personText[0].empStroy + "</p>";
images += image;
sliderPoints += sliderPoint;
empNameShow += empName;
imageShows += imageShow;
peopleBescribeShow += peopleBescribe;
/*$("#imagesHonor").html(images);
$("#sliderPoint").html(sliderPoints);*/
$("#empName").html(empNameShow);
$("#imageShow").html(imageShows);
$("#peopleBescribe").html(peopleBescribeShow);
}
});
/**************************************时间格式化处理************************************/
function dateFtt(fmt, date) {
var o = {
"M+": date.getMonth() + 1, //月份
"d+": date.getDate(), //日
"h+": date.getHours(), //小时
"m+": date.getMinutes(), //分
"s+": date.getSeconds(), //秒
"q+": Math.floor((date.getMonth() + 3) / 3), //季度
"S": date.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
//创建时间格式化显示
function crtTimeFtt(value, row, index) {
var crtTime = new Date(value);
return dateFtt("yyyy", crtTime);//直接调用公共JS里面的时间类处理的办法
}
</script>
</html>
567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
