H5轮播图简版

最新推荐文章于 2024-07-18 17:16:21 发布

morningqsun

最新推荐文章于 2024-07-18 17:16:21 发布

阅读量1.6k

点赞数 1

分类专栏：轮播

本文链接：https://blog.csdn.net/morningqsun/article/details/77196060

版权

这个示例展示了如何使用HTML、CSS和JavaScript创建一个简单的H5轮播图。通过触摸滑动事件，实现了左右切换图片的效果。同时，轮播图还包括了小圆点导航，点击可以跳转到相应图片。

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>H5轮播</title>
    <style type="text/css">
        * { margin: 0; padding: 0; }
        .box { position: relative; width: 100%; max-width: 768px; height: 180px; margin: 0 auto; box-sizing: border-box; }
        .wrap { position: relative; width: 100%; max-width: 768px; height: 180px; overflow: hidden; }
        .content { position: absolute; top: 0; left: 0; width: 100%; max-width: 768px; height: 180px; background: #CCC; line-height: 180px; color: #000; text-align: center; font-size: 100px; z-index: 22; }
        .content.cur { z-index: 25; }
        .dot { position: absolute; bottom: 15px