html轮播图片不显示不了,求教各位前辈,一个轮播图在谷歌浏览器下显示异常的问题!!!...

新手练习,写了一个无缝轮播。在火狐和IE11下都运行正常,在谷歌浏览器下第一次运行会出现某几张图片不显示,但也没具体的报错信息,需要手动刷新几次后才能正常显示。

求教大家帮忙看看问题出在哪里?谷歌浏览器:版本 64.0.3282.140(正式版本32 位)

bV7XWl?w=901&h=614

Tab选项卡焦点图

* {

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);

}

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();

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值