（9）网页轮播图

superfortunate

已于 2022-01-29 01:02:38 修改

阅读量192

点赞数

分类专栏： JavaScript知识点详细学习笔记文章标签： javascript elementui vue.js

于 2022-01-28 23:40:44 首次发布

本文链接：https://blog.csdn.net/weixin_59598992/article/details/122737978

版权

本文介绍了如何使用JavaScript、ElementUI和Vue.js构建网页轮播图。内容包括结构搭建，CSS样式设置，以及实现轮播图的功能需求，如点击按钮和小圆圈切换图片、自动播放、鼠标悬停暂停等。通过滚动图片并计算小圆圈索引与图片宽度的关系，实现了精准的滚动定位。

摘要由CSDN通过智能技术生成

结构搭建如下:

 <div class="qiantu width">
        <!-- <img src="images/_V9A3354.png" alt=""> -->
        <ul class="ddl">
            <li>
                <a href=""><img src="images/001.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/004.jpg" alt=""></a>
            </li>
            <li>
                <a href=""><img src="images/003.jpg" alt=""></a>
            </li>
        </ul>
        <ol class="circle">
            <!-- 动态生成轮播图下面的小圆圈 -->
        </ol>
        <a href="javascript:;" class="arrow-l"> &lt; </a>
        <a href="javascript:;" class="arrow-r"> > </a>
    </div>

一个ul里面几个li放自己想要的图片，同时准备几个显示哪个图片位置的小圆圈，以及左右滑动的两侧按钮。