练习：京东商城的一个轮播图效果，可以自动切换图片和点击切换图片，主要运用了Bootstrap的Carousel插件与js插件等知识内容，练习源文件下面有下载链接。

前言

一、练习

1、目标图：

最终要实现的一个效果

2、分析结构：

1.该网页由三部分构成，分别为图片、左右控制箭头、圆点指示符。
2.结构所包含的内容：
   1）图片：一共有8张图片，它们都叠加在一起
   2）箭头：左右两个
   3）标识点：一共8个，对应8张图片
3.内容要实现的样式及动作
   1）图片：在固定框中，达到图片自动轮播效果，图片切换时间
   2）箭头：箭头白色，还有一层阴影，在图片两端，控制点击图片向前切换和向后切换
   3）标识点：图片与点对应时，点白色并带有阴影边框，当图片切换时点跟着移动

二、代码实现

1、源码：

index.html文件代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>京东轮播图练习</title><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/bootstrap.min.css"><style>/* 设置图片容器大小 */.carousel {width: 590px;height: 470px;margin: 100px auto;position: relative;}/* 设置导航点的样式 */.carousel-indicators {/* 开启定位，方便调整导航点的位置 */position: absolute;left: 90px;bottom: 10px;}.carousel-indicators li {/* 设置为原点，并设置大小 */width: 10px;height: 10px;border-radius: 50%;}/* 设置轮播时，导航点的样式 */.carousel-indicators .active {width: 12px;height: 12px;margin: 0;background: rgba(255, 255, 255, 1);border: 1px solid rgba(0, 0, 0, .05);}</style>
</head><body><!-- 整个大容器将图片、标识点、箭头装在一起 --><div id="myCarousel" class="carousel slide" data-ride="carousel"><!-- 图片容器 --><div class="carousel-inner"><div class="item active"><img src="./images/1.jpg.webp"></div><div class="item"><img src="./images/2.jpg.webp"></div><div class="item"><img src="./images/3.jpg.webp"></div><div class="item"><img src="./images/4.jpg"></div><div class="item"><img src="./images/5.jpg.webp"></div><div class="item"><img src="./images/6.jpg"></div><div class="item"><img src="./images/7.jpg.webp"></div><div class="item"><img src="./images/8.jpg.webp"></div></div><!--圆圈指示符--><ol class="carousel-indicators"><li data-target="#myCarousel" data-slide-to="0" class="active"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li><li data-target="#myCarousel" data-slide-to="3"></li><li data-target="#myCarousel" data-slide-to="4"></li><li data-target="#myCarousel" data-slide-to="5"></li><li data-target="#myCarousel" data-slide-to="6"></li><li data-target="#myCarousel" data-slide-to="7"></li></ol><!-- 左右控制按钮 --><a class="left carousel-control" href="#myCarousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a></div><script src="./js/jquery-1.12.4.js"></script><script src="./js/bootstrap.min.js"></script><!-- 设置图片自动切换时间 --><script>//1.5秒钟图片切换一次$('#myCarousel').carousel({interval: 1500})</script>
</body></html>

2、运行效果：

小结

上面就是京东商城轮播图的实现了
1.给图片所在容器开启绝对定位，给整个大容器开启相对定位，达到叠加到一起的效果；
2.设置li标签的宽高，再通过border-radius实现圆点效果;
3.将border的颜色设置为rgba格式，添加一个透明效果，来实现白点的阴影边框。
因能力有限，不能完全还原京东商城轮播的一个样式，以上内容如有错误，还望大家不吝赐教!

下载链接

网盘链接：https://pan.baidu.com/s/1Q8OXgNCDVKLapvsSMhXBBw
提取码：ph9r

上传资源：https://download.csdn.net/download/weixin_45336315/13120856

Bootstrap练习：京东商城轮播图相关推荐

从零开始学前端：OPPO商城轮播图 --- 今天你学习了吗？（CSS：Day23）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:css3新属性scss和less - 今天你学习了吗?(CSS:Day22) 文章目录从零开始学前端:程 ...
vue后台系统管理项目-商城轮播图管理功能
商城轮播图管理功能功能介绍: 1.轮播图列表分页功能: 2.轮播图添加功能: 3.轮播图编辑功能: 4.轮播图删除功能: 5.轮播图启用禁用功能: 6.轮播图获取排序号功能: 7.轮播图查看详情功能 ...
JS简单实现京东网页轮播图
需要html,css,js, 源代码 HTML <div class="box">  <a href="j ...
如何使用bootstrap实现轮播图？
大家好,我是雄雄,今天给大家分享的是如何使用bootstrap实现轮播图,美观大方且兼容性还好! 轮播图就不做过多的介绍了,大家都知道,只是轮播的实现有多种方式,例如使用纯js写,费时费力,且还不适用 ...
关于如何将轮播图在移动端和pc端自适应的操作
我用的bootstrap框架做的,轮播图代码用的bootstrap上的. 如何做到pc端和移动端兼容,关键在于一张图片需要2份,一份大的图,一份小的图,通过屏幕宽度的改变,来确定展示大图片还是小图片. ...
css轮播箭头怎么隐藏,CSS——轮播图中的箭头
注意事项: 1.定位中left权重比right高,top权重比bottom高 2.两个span标签嵌套在一个盒子中,将来显示隐藏只需要控制父盒子就行了 .box { width: 400px; hei ...
bootstrap 两个轮播图冲突_Bootstrap的轮播图样式
轮播效果是一个幻灯片效果,使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放,它适用于一系列图像.文本或自定义标记,还包括对上一个/下一个图的浏览控制和指令支持. 轮播组件不支持互相 ...
Bootstrap之轮播图
2019独角兽企业重金招聘Python工程师标准>>>  Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除 ...
聊一聊 bootstrap 的轮播图插件
今天做工作的时候,轻车熟路的做完,又用到了bootstrap的轮播图,觉得有必要安利一下这个插件,如果你需要的轮播图.功能不需要太炫酷,那么bootstrap的插件是你的首要选择. 使用方式引入js ...

Bootstrap练习：京东商城轮播图

目录

前言