极客观点
项目管理
HarmonyOS
新手练习，写了一个无缝轮播。在火狐和IE11下都运行正常，在谷歌浏览器下第一次运行会出现某几张图片不显示，但也没具体的报错信息，需要手动刷新几次后才能正常显示。
求教大家帮忙看看问题出在哪里？谷歌浏览器：版本 64.0.3282.140（正式版本32 位）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Tab选项卡焦点图</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
#start {
display: block;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
}
#banner {
width: 800px;
height: 450px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
#banner_imgs {
width: 4800px;
position: absolute;
left: 0;
top: 0;
}
#banner_imgs li {
float: left;
}
#banner_imgs img {
width: 800px;
height: 100%;
display: block;
}
#left {
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 20px 0;
border-color: transparent red;
position: absolute;
top: calc(50% - 20px);
left: 0;
background-color: RGBA(0, 0, 0, .3);
display: none;
}
#right {
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent red;
position: absolute;
top: calc(50% - 20px);
left: calc(100% - 20px);
background-color: RGBA(0, 0, 0, .3);
display: none;
}
#number {
width: 100%;
text-align: center;
position: absolute;
left: 0;
bottom: 20px;
}
#number a {
display: inline-block;
width: 20px;
border: 1px solid red;
height: 10px;
}
.number_color {
background-color: red;
}
#left:hover,
#right:hover {
background-color: RGBA(0, 0, 0, .7);
}
</style>
</head>
<body>
<input id="start" type="button" value="发送验证码">
<div id="banner">
<div id="banner_ul">
<ul id="banner_imgs">
<li>
<a href="javascript:">
<img src="https://youngfever.coding.me/jiaodian1.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:">
<img src="https://youngfever.coding.me/jiaodian2.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:">
<img src="https://youngfever.coding.me/jiaodian3.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:">
<img src="https://youngfever.coding.me/jiaodian4.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:">
<img src="https://youngfever.coding.me/jiaodian5.jpg" alt="">
</a>
</li>
</ul>
</div>
<div id="number">
<a class="number_color" href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
<a href="javascript:"></a>
</div>
<div id="left"></div>
<div id="right"></div>
</div>
<script>
window.onload = function () {
var start = document.getElementById('start');
var countdown_number = 60;
var countdown_timer = null;
//倒计时
var banner_imgs = document.getElementById('banner_imgs');
var banner = document.getElementById('banner');
var number = document.getElementById('number');
var number_a = number.getElementsByTagName('a');
var left = document.getElementById('left');
var right = document.getElementById('right');
var index = 0;
var banner_imgs_width = banner_imgs.getElementsByTagName('img')[0].width;
var timer = '';
start.onclick = function () {
countdown_timer = setInterval(function () {
start.disabled = 'ture';
start.value = countdown_number-- + '秒后重试';
if (countdown_number === 0) {
start.disabled = '';
start.value = '发送验证码';
countdown_number = 60;
clearInterval(countdown_timer);
}
}, 500);
};
for (var y = 0; y < number_a.length; y++) {
number_a[y].id = y;
number_a[y].onmouseover = function () {
move(this.id, -banner_imgs_width);
index = Number(this.id);//此处有大坑，id默认类型是字符串类型，需要转换；
}
}//设置index值和当前图的值绑定
function click_type(click_type) {
if (click_type.onclick) {
if (click_type === right) {
if (index === 4) {
index = 0;
}
else {
index++
}
}
if (click_type === left) {
if (index === 0) {
index = 4;
}
else {
index--;
}
}
}
}//点击函数，根据左右点击类型index值进行变化
function move(index_number, width) {
for (var i = 0; i < number_a.length; i++) {
banner_imgs.style.left = index_number * width + "px";
if (number_a[i].className === 'number_color') {
number_a[i].className = '';
}
number_a[index_number].className = 'number_color';
}
}//图片移动位置和当前所显示的红点
banner.onmouseover = function () {
stop();
right.style.display = 'block';
left.style.display = 'block';
};
banner.onmouseout = function () {
play();
right.style.display = 'none';
left.style.display = 'none';
};
left.onclick = function () {
click_type(left);
move(index, -banner_imgs_width);
};
right.onclick = function () {
click_type(right);
move(index, -banner_imgs_width);
};
function play() {
timer = setInterval(
function () {
right.onclick();
}, 1500)
}
function stop() {
clearInterval(timer)
}
play();
}
</script>
</body>
</html>
html5
项目地址，是这个吧？
跑了一下，你把img样式上那个
height:100%;直接删掉就行了……