js轮播图（一）

最新推荐文章于 2024-07-20 23:54:17 发布

Wayne_SvuJ

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量389

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Wayne_SvuJ/article/details/122565987

版权

步骤一：建立html基本布局

如下所示：

复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
    <div class="container">
        <div class="wrap" style="left:-600px;">
            <img src="./img/5.jpg" alt="">
            <img src="./img/1.jpg" alt="">
            <img src="./img/2.jpg" alt="">
            <img src="./img/3.jpg" alt="">
            <img src="./img/4.jpg" alt="">
            <img src="./img/5.jpg" alt="">
            <img src="./img/1.jpg" alt="">
        </div>
        <div class="buttons">
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
        </div>
        <a href="javascript:;" class="arrow arrow_left">&lt;</a>
        <a href="javascript:;" class="arrow arrow_right">&gt;</a>
    </div>
</body>
</html>

　　只有五张图片，却使用7张来轮播，这是为了实现无缝轮播，后面会详细介绍。

　　而5个span，即我们可以实时看到轮播图目前所处的位置。

　　最后是两个按钮，可以通过它来控制前进与后退。

　　这里我们需要对wrap使用绝对定位，所以用left:-600px;将第一张图片显示出来。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Wayne_SvuJ

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js轮播图（一）

步骤一：建立html基本布局如下所示：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>轮播图</title></head><body> <div class="container"> <div class="wrap" style="left:-600px;">
复制链接

扫一扫