体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

图片轮换错误

来源：5-1 右切换按钮

慕仔4204170

2022-09-02 19:37:03

//关键词轮换
{
    //1.获取搜索框对象
    let input = document.querySelector('.search input');

    //2.设置关键词数组
    const keyWords = ['Vue3.0','React','爬虫技术','Java','多线程'];

    //3.使用 setInterval 每隔两秒切换一个关键词，就是切换input的placeholder值
    //i代表数组的索引
    let i=0;
    placeholder='Vue3.0';
    input.placeholder = keyWords[i];
    setInterval(() => {
        i++;
        if(i == 5){
            i = 0;
        }
        input.placeholder = keyWords[i];
    },2000);
}

//轮播图
{
    //声明轮播图数组
    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++;
        if(i == 4){
            i = 0;
        }
        swiperA.style.backgroundImage = 'url(${swiperImgList[i]})';
    }
}
<!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="./font/iconfont.css">
    <link rel="stylesheet" href="./css/01-header.css">
    <link rel="stylesheet" href="./css/02-banner.css">

</head>
<body>
    <!--头部区域 开始-->
    <div id="header">
        <div class="nav-box">
            <!--logo-->
            <h1 class="fl">
                <a href="index.html">慕课网</a>
            </h1>
            <!--课程导航栏-->
            <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" alt="">
               
            </ul>
            <!--搜索框-->
            <div class="search fl">
                <div>
                    <input type="text">
                    <span class="iconfont icon-sousuo"></span>
                </div>
            </div>
            <!--登录注册-->
            <div class="login-area fr">
                <a href="#">登录</a>|
                <a href="#">注册</a>
                <a href="#" class="shop-car">
                    <span class="iconfont icon-tianchongxing-"></span>
                    我的课程
                </a>
                <span class="login-num">7</span>
            </div>
        </div>
    </div>
    <!--头部区域 结束-->

    <!--课程分类和轮播图 开始-->
    <div id="banner">
        <div class="banner-box w">
            <div class="g-banner">
                <div class="course-list fl">
                    <ul>
                        <li>
                          <span class="title">前端开发</span>:
                          <span class="sub-title">HTML5/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 fr ">
                    <!--轮播图-->
                    <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="title fl">
                        <h4>Java工程师</h4>
                        <p>综合就业率第一</p>
                    </div>
                </a>
                <a href="#" class="show-box">
                    <div class="sys-icon fl" style="background-image:url(./images/system/h5.png);"></div>
                    <div class="title fl">
                        <h4>前端工程师</h4>
                        <p>入门快、就业快、岗位多</p>
                    </div>
                </a>
                <a href="#" class="show-box">
                    <div class="sys-icon fl" style="background-image:url(./images/system/python.png);"></div>
                    <div class="title fl">
                        <h4>Python工程师</h4>
                        <p>应用领域最广泛</p>
                    </div>
                </a>
                <a href="#" class="show-box">
                    <div class="sys-icon fl" style="background-image:url(./images/system/web.png);"></div>
                    <div class="title fl">
                        <h4>web前端架构师</h4>
                        <p>培养前端p7级架构师</p>
                    </div>
                </a>
                <a href="#" class="show-box">
                    <div class="sys-icon fl" style="background-image:url(./images/system/java-s.png);"></div>
                    <div class="title fl">
                        <h4>Java架构师</h4>
                        <p>千万级电商架构0-100</p>
                    </div>
                </a>
                <div class="line"></div>
                <a href="#" class="more-btn">
                    <div>体系课</div>
                    <div>
                        more
                        <span class="iconfont icon-angle-right"></span>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <!--课程分类和轮播图 结束-->

    <script src="./js/index.js"></script>
</body>
</html>

https://img.mukewang.com/climg/6311eac309c39b6030922086.jpg


问题描述：

点了之后，不显示图片

写回答

1回答

好帮手慕小蓝

2022-09-03

同学你好，同学代码无法实现轮播效果的错误存在于index.js中，在onclick事件函数里，同学错误的将获取图片时的地址使用了分号而不是飘号，对比如下：

https://img.mukewang.com/climg/6312bdad090826b708910262.jpg

祝学习愉快~

0

0 学习 · 9886 问题

查看课程

相似问题

老师教我修复一下轮播图

回答 1

回答 1

如果轮播图使用img标签,使用src来更换图片,是不是就不能使用transition来添加动画效果了

回答 1

图片溢出

回答 1

老师，图片无法轮播

回答 1

打开慕课网App查看更多内容