来源网络搜索
切换页面会出现图片切换不过去的情况 小白判断是加载缓慢 还请指教~
<!DOCTYPE html>
<html>
<head>
<title>轮播图</title>
</head>
<body>
<div class="banner">
<div class="banner-bg">
<div class="swiper-container4 " id="swiper-container4" style="display: block;">
<div class="swiper-wrapper TopImage">
<!-- <div class=" swiper-slide ">
<a href="#">
<img src="img/5d0ca897c5331.jpg" class="bannerImage">
</a>
</div>
<div class=" swiper-slide ">
<a href="#">
<img src="img/5d26b1cb3cc87.jpg" class="bannerImage">
</a>
</div> -->
</div>
</div>
</div>
<!-- 用作查看图片总数 点击图片切换显示 -->
<div class="banner-i">
<div class="banner-r">
<div class="banner-r-b">
<span class="s10" id="currn"> </span>
<span class="s11 sum"> / </span>
<div class="banner-r-b-btn">
<img src="tu43.png" class="goBg ">
</div>
</div>
</div>
</div>
<div class="banner-pm ">
<div class="pm-box">
<ul class="pm-list">
<li>众志成城，共克时艰，价值2000万正价直播课免费送，武汉加油，中国加油！</li>
</ul>
</div>
</div>
</div>
</body>
<!-- 导入脚本 -->
<script type="text/javascript" src="js/swiper.min.js"></script>
<script type="text/javascript" src="js/jquery.min.1.7.2.js"></script>
<!-- 获取图片 -->
<script src="js/imgs.js"></script>
<style>
ul,
li {
list-style: none;
}
.banner {
width: 100%;
overflow: hidden;
min-width: 1200px;
display: block;
}
.banner-bg {
width: 100%;
overflow: hidden;
min-width: 1200px;
position: absolute;
display: block;
top: 90px;
left: 0;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform;
-webkit-box-sizing: content-box;
box-sizing: content-box
}
.banner-i {
width: 1170px;
height: 460px;
margin: 160px auto 0;
position: relative;
z-index: 1;
pointer-events: none;
}
.banner-r {
width: 40px;
height: 460px;
float: right;
position: relative;
pointer-events: none;
}
.banner-r-b {
position: absolute;
bottom: 0;
right: 0;
pointer-events: auto;
}
.banner-r-b span.s11 {
font-size: 16px;
font-family: 'PingFang SC';
font-weight: 600;
color: #ffffff;
line-height: 38px;
-webkit-writing-mode: tb-rl;
-ms-writing-mode: tb-rl;
writing-mode: tb-rl;
display: block;
}
.banner-r-b span.s10 {
font-size: 16px;
font-family: 'PingFang SC';
font-weight: 600;
color: #ffffff;
line-height: 38px;
-webkit-writing-mode: tb-rl;
-ms-writing-mode: tb-rl;
writing-mode: tb-rl;
display: block;
}
.banner-r-b-btn {
width: 38px;
height: 38px;
border: 2px solid rgba(255, 0, 114, 1);
display: block;
border-radius: 50%;
margin-top: 20px;
background: #ffffff;
cursor: pointer;
outline: medium;
}
.goBg {
width: 10px;
height: 14px;
display: block;
margin: 11px auto 0;
}
.bannerImage {
display: block;
height: 600px;
width: 100%;
object-fit: cover;
}
.swiper-slide {
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
-webkit-transition-property: -webkit-transform;
transition-property: -webkit-transform;
-o-transition-property: transform;
transition-property: transform;
transition-property: transform, -webkit-transform
}
.banner-pm{
width: 800px;height: 50px;position: relative;margin: 10px auto 0px;z-index: 1;overflow: hidden;text-align: center;
}
.pm-box {
width: 800px;
height: 50px;
overflow: hidden;
position: relative;
}
.pm-box .pm-list {
width: 800px;
height: auto;
position: absolute;
}
.pm-box .pm-list li {
width: 800px;
height: 50px;
line-height: 50px;
color: #ffffff;
font-size: 16px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>
</html>
js
$(function() {
// $(window).scroll(function() {
// var pageTop = $("#mpage").offset().top;
// var st = $(window).scrollTop();
// $("#mpage").css("background-position-y", function() {
// return (pageTop - st) / 1.8 + "px";
// })
// })
$.ajax({
url:'../api/home/slides/read',
success: function(data) {
let TopImages = data.data[0]
var html = ''; //代码块
var i;
// img/bg-img/bg-${i+1}.jpg TopImages[i].img TopImages[i].url
for (i = 0; i < TopImages.length; i++) {
html += `<div class=" swiper-slide "><a href="#">
<img src="` + TopImages[i] +
`" class="bannerImage"></a></div>`
}
//追加页面元素
$('.TopImage').append(html);
document.getElementById("currn").innerText = "01";
$('.sum').append('0' + TopImages.length)
},
error: function(err) {}
})
})
// banner
var swiper4 = new Swiper('.swiper-container4', {
slidesPerView: 'auto',
loop: true,
autoplay: true,
navigation: {
nextEl: '.banner-r-b-btn ',
},
});
swiper4.on('slideChangeTransitionEnd', function() {
$.ajax({
url:'../api/home/slides/read',
success: function(data) {
let TopImages = data.data[0]
var html = ''; //代码块
var i;
// img/bg-img/bg-${i+1}.jpg TopImages[i].img TopImages[i].url
for (i = 0; i < TopImages.length; i++) {
html += `<div class=" swiper-slide "><a href="#">
<img src="` + TopImages[i] +
`" class="bannerImage"></a></div>`
}
//追加页面元素
$('.TopImage').append(html);
document.getElementById("currn").innerText = "0" + (swiper4.activeIndex % TopImages.length + 1);
document.getElementsByClassName('.sum').innerText = "0" + (TopImages.length);
// $('.sum').append('0'+TopImages.length)
},
error: function(err) {
}
})
// document.getElementById("currn").innerText = "0"+(swiper4.activeIndex%TopImages.length+1);
});
swiper4.el.onmouseover = function() { //鼠标放上暂停轮播
swiper4.autoplay.stop();
}
swiper4.el.onmouseleave = function() {
swiper4.autoplay.start();
}
document.body.onmouseover = function() {
var obj = document.elementFromPoint(event.clientX, event.clientY);
if (obj.className == "bannerImage" || obj.className == "bus" || obj.className == "busBg" || obj.className == "b-o-h") {
$("#banner-c").css("display", "none");
}
}
