用手机浏览器打开没问题,但是在微信内部打开页面,轮播图无效
<div class='slide-show-container'>
<!--<div class='slide-show-image-container fl image-current-slide'>-->
<!--<img class='slide-show-image' src='assets/images/index_slide_01.png'>-->
<!--</div>-->
<!--<div class='slide-show-image-container fl'>-->
<!--<img class='slide-show-image' src='assets/images/index_slide_02.png'>-->
<!--</div>-->
<!--<div class='slide-show-image-container fl'>-->
<!--<img class='slide-show-image' src='assets/images/index_slide_03.png'>-->
<!--</div>-->
<ul>
<!-- 用户可能一开始往上一张滑,所以要多添加一个focus3 -->
<li>
<img class='slide-show-image' src="assets/images/index_slide_03.png" alt="心里只有你生活网">
</li>
<li>
<img class='slide-show-image' src="assets/images/index_slide_01.png" alt="心里只有你生活网">
</li>
<li>
<img class='slide-show-image' src="assets/images/index_slide_02.png" alt="心里只有你生活网">
</li>
<li>
<img class='slide-show-image' src="assets/images/index_slide_03.png" alt="心里只有你生活网">
</li>
<li>
<img class='slide-show-image' src="assets/images/index_slide_01.png" alt="心里只有你生活网">
</li>
</ul>
<ol>
<li class="current"></li><li class='ml5'></li><li class='ml5'></li>
</ol>
</div>
/* 首页轮播样式 */
.slide-show-container {
/*height: 7rem;*/
height: 150px;
/*background: maroon;*/
overflow: hidden;
/*display: flex;*/
/*flex-direction: row;*/
position: relative;
}
.slide-show-container ul {
width: 500%;
overflow: hidden;
margin-left: -100%;
height: 100%;
}
.slide-show-container ul li {
float: left;
width: 20%;
height: 100%;
}
.slide-show-container ol {
position: absolute;
/*bottom: 5px;*/
/*right: 5px;*/
bottom: 5px;
left: 50%;
/*background: deeppink;*/
margin-left: -18px;
}
.slide-show-container ol li {
width: 5px;
height: 5px;
display: inline-block;
/*background-color: #fff;*/
background-color: #E3D9D9;
border-radius: 5px;
transition: all .2s;
list-style: none;
margin:0;
padding:0;
margin-left: 5px;
}
.slide-show-container .current {
width: 16px;
border-radius: 5px;
}
.slide-show-image-container {
height: 100%;
width: 100%;
/*display: none;*/
}
.index-message-type-options-container {
width: 100%;
/*height: 20px;*/
background: #ffffff;
margin-bottom: 10px;
box-sizing: border-box;
/*padding-left: 9pt;*/
/*padding-right: 9pt;*/
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
可以调试看看是不是轮播图库的资源有问题
本身微信实现的浏览器模拟只是常规浏览器特性的子集,如果想做微信中达到同样的效果,需要保证相应的兼容性(及不能使用超出范围的特性)