javascript的轮播图制作

最新推荐文章于 2024-08-17 14:58:02 发布

ax阿楠

最新推荐文章于 2024-08-17 14:58:02 发布

阅读量81

点赞数

分类专栏： JAVASCRIPT 文章标签： html

本文链接：https://blog.csdn.net/l765692971/article/details/118736704

版权

JAVASCRIPT 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这个博客展示了如何使用HTML和CSS创建一个轮播图效果。通过重置默认样式，设置图片尺寸，绝对定位元素以及应用伪类选择器，实现了图片的自动切换和导航点的交互功能。轮播图包含多个明星的图片，可以通过左右箭头进行手动切换，同时导航点的高亮显示指示当前显示的图片。

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

轮播图效果

        * {
            /* 重置浏览器的默认样式 */
            margin: 0 0;
            padding: 0 0;
        }
        
        img {
            /* 把图片的大小设一样 */
            width: 320px;
            height: 290px;
        }
        /* 无序列表 */
        
        #listbox {
            /* 给图片定位 */
            position: relative;
            width: 320px;
            height: 290px;
            /* 边距 上边距150,auto左右居中*/
            margin: 120px auto;
        }
        
        ul li {
            /* 要让图片叠起来 */
            /* 丢失文档流position:absolute */
            position: absolute;
            /* 写完上面代码.左下角会有个点--list-style-type: none;去掉那个点 */
            list-style-type: none;
        }
        /* 给左箭头定位 */
        
        .arrowsleft {
            position: relative;
            /* 把箭头图片从浮动移出来 */
            /* 调整图片上下位置 */
            bottom: 290px;
        }
        
        .arrowsleft a {
            /* 因为图片被浮动了,可能在当前图下面 */
            float: left;
            width: 30px;
            height: 30px;
            /* 调整图片左右位置 */
            margin-left: 423px;
            /* 背景颜色 */
        }
        
        .arrowsright {
            position: relative;
            /* 把箭头图片从浮动移出来 */
            /* 调整图片上下位置 */
            bottom: 290px;
        }
        
        .arrowsright {
            /* 因为图片被浮动了,可能在当前图下面 */
            float: left;
            width: 30px;
            height: 30px;
            /* 调整图片左右位置 */
            margin-left: 313px;
        }
        /* 设置白点对应盒子div的位置 */
        
        #white_point {
            /* 先定位 */
            position: absolute;
            /* 大小 */
            width: 130px;
            height: 20px;
            /* 上下位置 */
            bottom: 170px;
            /* 左右位置 */
            left: 463px;
        }
        /* 设置A标签 -标签就是圆点*/
        
        #white_point a {
            /* 浮动 让点浮起来在上面*/
            float: left;
            /* 大小 */
            width: 10px;
            height: 9px;
            /* 设置颜色 rgba最后一个是透明度*/
            background-color: rgba(235, 232, 228, 0.7);
            /* 做一个圆形边框 */
            border-radius: 50%;
            /* 做一个标签之间的距离 */
            margin-left: 6px;
        }
        /* 伪类选择器 */
        
        #white_point a:hover {
            /* 背景颜色 */
            background-color: red;
            /* 边框颜色--1个大小,固态加粗,白色边框 */
            border: 1px solid white
        }
        /* 圆点第一次过来 */
        
        #white_point a.checked {
            /* 背景颜色 */
            background-color: red;
            /* 边框颜色--1个大小,固态加粗,白色边框 */
            border: 1px solid white
        }
    </style>
</head>

<body>
    <div>
        <!-- ul无序列表 -->
        <ul id="listbox">
            <!-- 第一项-放图片 -->
            <li><img src="./img/宋小宝.jpg"></li>
            <li><img src="./img/岳云鹏.jpg"></li>
            <li><img src="./img/张小斐.jpg"></li>
            <li><img src="./img/沈腾.jpg"></li>
            <li><img src="./img/贾玲.jpg"></li>
            <li><img src="./img/郭德纲.jpg"></li>
            <li><img src="./img/马丽.jpg"></li>
        </ul>
        <!-- 话小白点 -->
        <div id="white_point">
            <a href="" class="checked"></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>
            <a href=""></a>

        </div>

        <!-- 左箭头 -->
        <div class="arrowsleft">
            <a href="#" id="arrleft"><img src="./img/箭头-左.png" style="width: 50px;height: 50px;"></a>
        </div>
        <!-- 右箭头 -->
        <div class="arrowsright">
            <a href="#" id="arrright"><img src="./img/箭头-右.png" style="width: 50px;height: 50px;"></a>
        </div>


    </div>

</body>
<script src="./轮播图_2.js"></script>

</html>ript
在这里插入代码片

ax阿楠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript的轮播图制作

轮播图效果 * { /* 重置浏览器的默认样式 */ margin: 0 0; padding: 0 0; } img { /* 把图片的大小设一样 */ width: 320px; height: 290px; } /* 无序列表 */
复制链接

扫一扫

专栏目录