1. 本际云推荐 - 专业推荐VPS、服务器，IDC点评首页
  2. 云主机运维
  3. VPS运维

用javascript实现图片轮播简单版示例

小编小本本 • • VPS运维

用 JavaScript 实现图片轮播简单效果的具体代码

以下是使用 JavaScript 实现图片轮播的具体代码：

用javascript实现图片轮播简单版示例

这里是 CSS 样式，定义了图片轮播所需的样式：

* {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
img {
  display: block;
}
a {
  text-decoration: none;
}
input {
  outline: none;
}
.clearFix:after {
  content: "";
  display: table;
  clear: both;
}
#box {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 50px auto;
  overflow: hidden;
}
#box .imglist {
  position: absolute;
  left: -500px;
  top: 0;
  width: 3500px;
  height: 300px;
}
#box .imglist li {
  float: left;
  width: 500px;
  height: 300px;
}
#box .imglist li img {
  width: 500px;
  height: 300px;
}
#box span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 50px;
  background-color: rgba(200, 200, 200, 0.7);
  font-size: 20px;
  text-align: center;
  line-height: 50px;
  color: white;
  opacity: 0;
  transition: opacity 1s;
}
#box .left {
  left: 0;
}
#box .right {
  right: 0;
}
#box .btnlist {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  overflow: hidden;
}
#box .btnlist li {
  float: left;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  background-color: gray;
}
#box .btnlist li.current {
  background-color: red;
}

这里是 HTML 代码，包含图片轮播的元素及初始显示在页面上的图片：

<div id="box">

  <ul class="imglist">

    <li><img src="images/yaya5.jpg" /></li>

    <li><img src="images/yaya1.jpg" /></li>

    <li><img src="images/yaya2.jpg" /></li>

    <li><img src="images/yaya3.jpg" /></li>

    <li><img src="images/yaya4.jpg" /></li>

    <li><img src="images/yaya5.jpg" /></li>

    <li><img src="images/yaya1.jpg" /></li>

                                                        
原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/7283.html
赞 (0)
小编小本本小编小本本
« 上一篇 2023年4月9日 am10:03
下一篇 » 2023年4月10日 am8:00

相关推荐

  • 香港服务器托管费用 VPS运维

    香港服务器托管费用

    什么是香港服务器托管费用？ 香港服务器托管费用是指将服务器存储在香港机房内，由托管公司提供机房、带宽、网络设备、技术支持等服务的费用。托管服务可以让客户免去自己维护服务器的麻烦，专…

    2023年4月12日
  • Mysql升级之glibc包升级 VPS运维

    Mysql升级之glibc包升级

    Mysql升级之glibc包升级 小编今天为大家介绍一种升级Mysql的方式：通过glibc包升级，将Mysql5.7.17升级至5.7.26。Mysql升级相对来说还是比较简单的…

    2023年4月16日
  • Python截图识字简单地完成流程 VPS运维

    Python截图识字简单地完成流程

    Python实现简繁体转换 作为一个工作者，我们常常需要把繁体版转化成简体中文版。为了帮助小伙伴们更好地完成这一任务，本文分享了有关Python实现截图识字的资料。 Python实…

    2023年4月17日
  • 如何使用Python批量裁剪图片 VPS运维

    如何使用Python批量裁剪图片

    Python批量裁剪图片详解 大家好，我是本际云服务器推荐网的小编小本本，今天为大家带来一个详细解答，关于使用Python批量裁剪图片的一些事宜，包括具体的操作方法和提高效率的方法…

    2023年4月17日
  • 新零售平台有哪些(mfoyou是什么意思？) VPS运维

    新零售平台有哪些(mfoyou是什么意思？)

    什么是mfoyou？ Mfoyou是一个电商平台，它提供了许多商家的商品供用户购买，同时还提供了类似于物流、代理、计费等各种服务。 新型电商平台和新零售平台有哪些？ 在传统的电商平…

    2023年4月19日
  • Fastdfs集群迁移及扩容 VPS运维

    Fastdfs集群迁移及扩容

    Fastdfs集群迁移及扩容 我是IT那活儿公众号的小编，今天为大家介绍Fastdfs集群迁移及扩容的相关内容。 业务场景 Fastdfs软件版本Fastdfs：5.05节点架构2…

    2023年4月12日
  • Kafka宕机故障恢复 VPS运维

    Kafka宕机故障恢复

    故障背景 本际云服务器平台在进行数据采集时，发现平台数据查询异常，经过仔细核查发现后台的kafka连接异常，并且日志文件涨至200G，导致MySQL主机存储溢出，最终导致整个平台使…

    2023年4月16日
  • Oracle数据库NBU备份异机恢复操作 VPS运维

    Oracle数据库NBU备份异机恢复操作

    Oracle数据库NBU备份异机恢复操作 你好，我是本际云服务器推荐网的小编小本本。在业务侧误删一个重要的业务表且无法通过常规手段恢复的情况下，采用异机恢复方式可以从NBU备份中恢…

    2023年4月17日
  • Redis究竟是何物：数据库还是缓存？ VPS运维

    Redis究竟是何物：数据库还是缓存？

    Redis 是一个高性能的键值存储系统，可以用作数据库、缓存和消息中间件。然而，当人们谈论 Redis 时，常常会发现争议：Redis究竟是数据库还是缓存？ 部分人认为 Redis…

    2023年4月1日
  • 微信小程序实现自定义多列选择器使用 VPS运维

    微信小程序实现自定义多列选择器使用

    多列选择器实现步骤 在项目搭建过程中，需要实现一个多列选择器。在用户确定之前，无论列表如何转，对于已选择的都不会有影响，只有在确定选择内容后才显示值上。 思路：保存两份数据，一份用…

    2023年4月17日