HTML+CSS+JS实现京东轮播图——z-index篇

邻家的肥猫

于 2022-01-13 17:22:13 发布

阅读量1.5k

点赞数 2

分类专栏：前端实战练习合集文章标签： css javascript html

本文链接：https://blog.csdn.net/sinat_50265804/article/details/122476771

版权

轮播图功能

1.点击上一页按钮，返回上一页；点击下一页按钮，进入下一页；

2.图片每隔3秒自动轮播，鼠标移入时轮播停止

3.小圆点和图片保持动态联系，点击小圆点可跳转到指定页。

涉及的知识点

HTML

1.列表

2.按钮

3.data-自定义类

CSS

1.相对定位和绝对定位

2.z-index

JS

1.for循环

2.if语句

3.定时器和清除定时器

4.onmouseover和onmouseleave

5.onclick绑定事件

代码展示

HTML文件代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>京东轮播图</title>
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3007608_225lisdbnn9.css">
    <script src="/js/main.js"></script>
</head>
<body>
    <div class="wrap">
        <ul class="list" onmouseover="stop()" onmouseleave="start()">
            <li class="item active"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <l

最低0.47元/天解锁文章

邻家的肥猫

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML+CSS+JS实现京东轮播图——z-index篇

轮播图功能1.点击上一页按钮，返回上一页；点击下一页按钮，进入下一页；2.图片每隔3秒自动轮播，鼠标移入时轮播停止3.小圆点和图片保持动态联系，点击小圆点可跳转到指定页。涉及的知识点HTML1.列表2.按钮3.data-自定义类CSS1.相对定位和绝对定位2.z-indexJS1.for循环2.if语句3.定时器和清除定时器4.onmouseover和onmouseleave5.onclick绑定事件代码展示HTML文件代码&
复制链接

扫一扫