快速实现轮播图片效果

最新推荐文章于 2024-04-15 10:28:24 发布

VIP文章正在山路上

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量487

点赞数 2

分类专栏： Bootstrap 文章标签： html bootstrap css

本文链接：https://blog.csdn.net/LLLLLLZZZZZ/article/details/120687044

版权

效果描述：

轮播图，默认情况下循环向左轮播，点击左右箭头实现切换到上一张以及下一张，点击小圆点将直接显示单击的那张图片。

实现代码：

使用bootstrap中的Carousel插件实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>轮播图</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <style>
        body{
            padding: 30px;
        }
        #myCarousel{
            width: 550px;
        }
        h3,p{
            color: yellow;
        }
        img{
            width: 100%;
        }

/*修改插件中的样式的，就是

最低0.47元/天解锁文章

优惠劵

正在山路上

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
快速实现轮播图片效果

效果描述：轮播图，默认情况下循环向左轮播，点击左右箭头实现切换到上一张以及下一张，点击小圆点将直接显示单击的那张图片。实现代码：使用bootstrap中的Carousel插件实现<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>轮播图</title> <meta name="viewport"..
复制链接

扫一扫