老师，图片无法轮播
来源：5-1 右切换按钮
嫣语四然
2023-12-03 22:20:22
点击右侧按钮之后背景图无法轮播，后台显示图片地址找不到，麻烦老师帮忙看一下
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>慕课网首页案例</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/01-header.css">
<link rel="stylesheet" href="css/02-banner.css">
<link rel="stylesheet" href="./font/iconfont.css">
</head>
<body>
<!-- 头部导航 开始 -->
<div id="header" class="bgfff">
<div class="nav-box">
<!-- logo 开始 -->
<h1 class="fl">
<a href="index.html">慕课网</a>
</h1>
<!-- logo 结束 -->
<!-- 课程导航栏 开始-->
<ul class="item-box fl">
<li>
<a href="#">免费课</a>
</li>
<li>
<a href="#">实战课</a>
</li>
<li>
<a href="#">体系课</a>
</li>
<li>
<a href="#">教程</a>
</li>
<li>
<a href="#">发现</a>
</li>
<li>
<a href="#">商业合作</a>
</li>
<img src="images/new.png">
</ul>
<!-- 课程导航栏 结束 -->
<!-- 搜索框 开始 -->
<div class="search fl">
<div>
<input type="text" name="" id="">
<span class="iconfont icon-sousuo"></span>
</div>
</div>
<!-- 搜索框 结束 -->
<!-- 登录注册 开始 -->
<div class="login-area fr">
<a href="#">登录</a>|
<a href="#">注册</a>
<a href="#" class="shop-cart">
<span class="iconfont icon-tianchongxing-"></span>
我的课程
</a>
<span class="cart-number">7</span>
</div>
<!-- 登录注册 结束 -->
</div>
</div>
<!-- 头部导航 结束 -->
<!-- 课程分类和轮播图 开始 -->
<div id="banner">
<div class="w banner-box">
<div class="g-banner">
<div class="course-list fl">
<ul>
<li>
<span class="title">前端开发：</span>
<span class="sub-title">HTML/Vue.js/Node.js</span>
<span class="iconfont icon-yousanjiao"></span>
</li>
<li>
<span class="title">后端开发：</span>
<span class="sub-title">Java/Python/Go</span>
<span class="iconfont icon-yousanjiao"></span>
</li>
<li>
<span class="title">移动开发：</span>
<span class="sub-title">Flutter/Android/iOs</span>
<span class="iconfont icon-yousanjiao"></span>
</li>
<li>
<span class="title">计算机基础：</span>
<span class="sub-title">算法/数学/数据库</span>
<span class="iconfont icon-yousanjiao"></span>
</li>
<li>
<span class="title">前沿技术：</span>
<span class="sub-title">AI/大数据/数据分析</span>
<span class="iconfont icon-yousanjiao"></span>
</li>
<li>
<span class="title">测试运维：</span>
<span class="sub-title">自动化测试/容器</span>
<span class="iconfont icon-yousanjiao"></span>
</li>
<li>
<span class="title">更多方向：</span>
<span class="sub-title">产品设计/UI设计/游戏</span>
<span class="iconfont icon-yousanjiao"></span>
</li>
</ul>
</div>
<!-- 轮播图 -->
<div class="swiper fl">
<a href="#"></a>
<!-- 左右按钮 -->
<div class="arrow arrow-l">
<span class="iconfont icon-angle-left"></span>
</div>
<div class="arrow arrow-r">
<span class="iconfont icon-angle-right"></span>
</div>
<ul class="circle-list">
<li class="current"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="sys-class">
<a href="#" class="show-box">
<div class="sys-icon fl" style="background-image: url(images/system/java.png);"></div>
<div class="fl">
<h4>Java工程师</h4>
<span>综合就业第一名</span>
</div>
</a>
<a href="#" class="show-box">
<div class="sys-icon fl" style="background-image: url(images/system/h5.png);"></div>
<div class="fl">
<h4>前端工程师</h4>
<span>入门快，就业快，岗位多</span>
</div>
</a>
<a href="#" class="show-box">
<div class="sys-icon fl" style="background-image: url(images/system/python.png);"></div>
<div class="fl">
<h4>Python工程师</h4>
<span>应用领域最广泛</span>
</div>
</a>
<a href="#" class="show-box">
<div class="sys-icon fl" style="background-image: url(images/system/web.png);"></div>
<div class="fl">
<h4>Web前端架构师</h4>
<span>培养前端P7级架构师</span>
</div>
</a>
<a href="#" class="show-box">
<div class="sys-icon fl" style="background-image: url(images/system/java-s.png);"></div>
<div class="fl">
<h4>Java架构师</h4>
<span>千万级电商架构0-100</span>
</div>
</a>
<div class="line"></div>
<a class="more">
<div>体系课</div>
<div>
more
<span class="iconfont icon-angle-right"></span>
</div>
</a>
</div>
</div>
</div>
<!-- 课程分类和轮播图 结束 -->
<script src="js/index.js"></script>
</body>
</html>
js
// 轮播图切换
{
// 声明轮播图数组
const swiperImgList=[
'./images/swiper/swiper-1.jpg',
'./images/swiper/swiper-2.jpg',
'./images/swiper/swiper-3.jpg',
'./images/swiper/swiper-4.jpg',
]
// 获取右侧切换按钮
const rightArrow=document.querySelector('.arrow-r');
// 获取a标签
const swiperA=document.querySelector('.swiper a');
// 用来控制数组的索引
let i=0;
rightArrow.onclick=function(){
i++;
swiperA.style.backgroundImage=url`(${swiperImgList[i]})`;
}
}写回答
1回答
-
好帮手慕小蓝
2023-12-04
同学你好，点击事件中，切换图片的代码里，url应当在引号中，代码对比如下：
//同学的代码 swiperA.style.backgroundImage = url`(${swiperImgList[i]})`; //正确的写法 swiperA.style.backgroundImage = `url(${swiperImgList[i]})`;祝学习愉快~
1
相似问题