html没学JS怎么写出轮播图效果？

已于 2023-09-24 16:14:31 修改
阅读量2.9k 收藏 28
点赞数 1
文章标签： javascript html 前端
于 2022-10-26 10:53:25 首次发布

其实要用轮播图效果还是要用到有关js的只是没必要学会，只是简单用一下的话，只需要要写两句js就行了，我给你准备好你复制上就好了  

其实在菜鸟教程上就有，菜鸟教程上搜索：Bootstrap4 轮播 就能找到有关轮播图，可以搜索一下看看，但是那个上面所讲的，当你引用它所说的css时，会出现一定程度的乱码，因为它所引用的css内部有许多没有必要的指令，这些指令一生效，就会与你自己所写的指令发生碰撞，然后页面效果就是变得你无法控制了，我也是将它引用的代码展开来，将不必要的代码给删去，这样直接把剩下的给复制上去，就会完美啦。接下来也不多说啦，代码呈上，我已经将需要复制的给标蓝，黑色的是让你看清楚应该放在哪里，我标红的就是我所说的会出现乱码结果的css 我也把我改好的css放到最下面，我已经标橙色

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <style>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }
  </style>
</head>
<body>

<div id="demo" class="carousel slide" data-ride="carousel">
 
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
 
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
    </div>
    <div class="carousel-item">
      <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
    </div>
  </div>
 
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
 
</div>

</body>
</html>

以下是轮播图所需要的css，将下面的代码单独写进一个css文件中，然后将上面的标红的css引用改成这个css引用就好了，像我这样

 这个是将代码复制到轮播图.css中

 这个是引用的

.carousel {

    position: relative

}

.carousel-indicators {

    position: absolute;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 15;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-pack: center;

    justify-content: center;

    padding-left: 0;

    margin-right: 15%;

    margin-left: 15%;

    list-style: none

}

.carousel-indicators li {

    box-sizing: content-box;

    -ms-flex: 0 1 auto;

    flex: 0 1 auto;

    width: 30px;

    height: 3px;

    margin-right: 3px;

    margin-left: 3px;

    text-indent: -999px;

    cursor: pointer;

    background-color: #fff;

    background-clip: padding-box;

    border-top: 10px solid transparent;

    border-bottom: 10px solid transparent;

    opacity: .5;

    transition: opacity .6s ease

}

@media (prefers-reduced-motion:reduce) {

    .carousel-indicators li {

        transition: none

    }

}

.carousel-indicators .active {

    opacity: 1

}

.carousel-inner {

    position: relative;

    width: 100%;

    overflow: hidden

}

.carousel-inner::after {

    display: block;

    clear: both;

    content: ""

}

.carousel-item {

    position: relative;

    display: none;

    float: left;

    width: 100%;

    margin-right: -100%;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

    transition: -webkit-transform .6s ease-in-out;

    transition: transform .6s ease-in-out;

    transition: transform .6s ease-in-out, -webkit-transform .6s ease-in-out

}

@media (prefers-reduced-motion:reduce) {

    .carousel-item {

        transition: none

    }

}

.carousel-item-next,

.carousel-item-prev,

.carousel-item.active {

    display: block

}

.active.carousel-item-right,

.carousel-item-next:not(.carousel-item-left) {

    -webkit-transform: translateX(100%);

    transform: translateX(100%)

}

.active.carousel-item-left,

.carousel-item-prev:not(.carousel-item-right) {

    -webkit-transform: translateX(-100%);

    transform: translateX(-100%)

}

.carousel-fade .carousel-item {

    opacity: 0;

    transition-property: opacity;

    -webkit-transform: none;

    transform: none

}

.carousel-fade .carousel-item-next.carousel-item-left,

.carousel-fade .carousel-item-prev.carousel-item-right,

.carousel-fade .carousel-item.active {

    z-index: 1;

    opacity: 1

}

.carousel-fade .active.carousel-item-left,

.carousel-fade .active.carousel-item-right {

    z-index: 0;

    opacity: 0;

    transition: 0s .6s opacity

}

@media (prefers-reduced-motion:reduce) {

    .carousel-fade .active.carousel-item-left,

    .carousel-fade .active.carousel-item-right {

        transition: none

    }

}

.carousel-control-next,

.carousel-control-prev {

    position: absolute;

    top: 0;

    bottom: 0;

    z-index: 1;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    -ms-flex-pack: center;

    justify-content: center;

    width: 15%;

    color: #fff;

    text-align: center;

    opacity: .5;

    transition: opacity .15s ease

}

@media (prefers-reduced-motion:reduce) {

    .carousel-control-next,

    .carousel-control-prev {

        transition: none

    }

}

.carousel-control-next:focus,

.carousel-control-next:hover,

.carousel-control-prev:focus,

.carousel-control-prev:hover {

    color: #fff;

    text-decoration: none;

    outline: 0;

    opacity: .9

}

.carousel-control-prev {

    left: 0

}

.carousel-control-next {

    right: 0

}

.carousel-control-next-icon,

.carousel-control-prev-icon {

    display: inline-block;

    width: 20px;

    height: 20px;

    background: no-repeat 50%/100% 100%

}

.carousel-control-prev-icon {

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e")

}

.carousel-control-next-icon {

    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e")

}

纪佰伦
关注
  • 1
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端html中不用js用css中的动画实现轮播图效果
weixin_46097122的博客
02-26 5439
web前端html中不用js用css中的动画实现轮播图效果 用到知识点主要是css中animation动画效果 1.animation属性简写如下 animation: name duration timing-function delay iteration-count direction fill-mode play-state; 2.关键帧的设置@keyframes name{ } <!DOCTYPE html> <html lang="en"> <head&gt
HTML与CSS学习总结5(未完，未添加js代码实现轮播图）
m0_62146534的博客
11-27 189
定位、CSS精灵、字体图标、过渡、透明度、光标类型和轮播的css实现即使用方法
html轮播图
最新发布
qq_64011014的博客
05-28 1527
注意这种方法：需要把图片名称修改为数字必须是连贯的。
[HTML]如何实现轮播图效果
dz1999的博客
06-08 1万+
实现轮播
【博主推荐】html好看的图片轮播多种风格（源码）
xcLeigh
07-18 1万+
html好看的图片轮播，支持各种配置，html设计自定义图片轮播，html图片轮播，好看的图片轮播效果，html图片轮播带源码。
自动轮播图html代码 不用js,不用写html排版标签的图片轮播js
weixin_29863809的博客
05-30 923
1.[代码][JavaScript]代码// 易寻团队 2013-01-01function IMGS(id,w,h,da,c){this.w=w;this.h=h;this.da=da;this.l=da.length;this.html="";this.id=id;this.child={img:[],div:[]};this.cr=0;this.xx=0;this.m=10;this.pr=...
html css js实现无缝轮播图思路及其实现
qq_56337139的博客
12-26 1691
上图黄色方块代表轮播图的排列位置，默认图片从start开始，切换到end的时候再往后走一个图片的宽度，到达chang的位置。此时通过js把盒子的transition过渡属性的时间置为，然后让盒子的位置切换到start的位置（此时看不到过度动画），再通过js把盒子的过渡属性置为n秒（n为滚动时间），继续自动切换，此为一个循环。
HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头
weixin_53748496的博客
12-08 4012
HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头
jquery写出PC端轮播图实例
10-18
【jQuery实现PC端轮播图】的实例是一个常见的前端网页设计功能，用于展示多张图片或内容，并在用户界面中自动或手动切换。这个实例利用jQuery库，避免了额外引入像swiper.js这样的第三方插件，减少了网络请求，提高...
中间图片放大，两边缩小，轮播效果
10-10
在这个案例中，描述提到是“自己写的，没有其它的JS”，这可能意味着开发者使用纯CSS来实现了这个轮播效果，没有依赖任何外部的JavaScript库，如jQuery或Swiper等。 首先，我们需要创建HTML结构。HTML部分通常包含...
美观实用-带按钮轮播图
06-20
1. **轮播图原理**：轮播图基于JavaScript实现，通过定时器控制图片的切换，模拟出一种连续滚动的效果。通常包括自动播放、手动切换、指示器和按钮等功能。 2. **带按钮的交互设计**：在这个轮播图中，按钮只在鼠标...
jquery实现多图无缝轮播切换图片代码
10-05
"轮播图"是网页设计中用于展示多张图片或内容的组件，它可以节省页面空间，同时吸引用户的注意力。"jQuery"则明确了实现这一功能所用的技术框架。 在【压缩包子文件的文件名称列表】中： - `index.html` 是网页的主...
基于anime.js实现动态圆形轮播图视觉差特效.zip
11-09
Anime.js 是一个轻量级、高性能的JavaScript动画库，它允许开发者创建出各种复杂的动画效果，包括CSS属性、SVG路径、JavaScript对象等。这个压缩包提供的代码示例，很可能是为了展示如何利用anime.js来制作具有视觉...
轮播图效果的实现
m0_67647150的博客
08-10 525
轮播图效果的实现，实现自动轮播，左右按钮切换，点选图片
HTML自动轮播图
入门小编程
09-20 3983
【代码】HTML自动轮播图。
CSS动画：transition 的用法介绍
mrtaoy96的博客
12-07 2284
CSS中最简单的动画叫做transition(转变)。通常，当一个元素的样式属性值发生变化时，我们会立即看到页面元素发生变化，也就是页面元素从旧的属性值立即变成新的属性值的效果。Transition(转变)能让页面元素不是立即的、而是慢慢的从一种状态变成另外一种状态，从而表现出一种动画过程。 这些转变效果可以用下列属性来指定： transition-property– 什么属性将用动画表现，例如, opacity。 transition-duration– 转变过程持续时间。 transiti...
HTML简单实现轮播图
热门推荐
qq_45225221的博客
01-09 9万+
html + js 简单实现轮播图 ![在这里插入图片描述](https://img-blog.csdnimg.cn/82ed6054639544ae93ff737ecca71d49.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbGltYWtyaW3kuLY=,size_20,color_FFFFFF,t_70,g_se,x_16 附上代码： <!DOCTYPE html> <ht
HTML+CSS+JavaScript实现轮播图
weixin_43396749的博客
11-24 2782
HTML+CSS+JavaScript实现轮播图
html中transtion属性,HTML5之样式CSS3：Transition属性介绍
weixin_31661121的博客
06-04 2184
Transition属性主要是用来对某个CSS属性的变化过程进行控制，简单地理解即为”在某个时间段内，平滑地改变某个CSS属性。有了这个样式，以后再也不用写繁琐的JS来实现HOVER效果啦(当然，前提是IE支持的话，哈哈哈)！不废话了，概要一下内容啦：Transition又包含了四个子属性，分别为property、duration、timing-function、delay。下面来一一介绍，在最后...
如何使用swiper.js库实现轮播图组件？
12-07
以下是使用Swiper.js库实现轮播图组件的步骤： 1. 首先，你需要在你的HTML文件中引入Swiper.js库的CSS和JS文件。你可以从Swiper.js官网下载最新版本的Swiper.js库，或者使用CDN链接。例如： ```html <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> ``` 2. 在HTML文件中创建一个容器元素，用于包含轮播图组件。例如： ```html <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div> <div class="swiper-slide">Slide 2</div> <div class="swiper-slide">Slide 3</div> </div> </div> ``` 3. 在JS文件中初始化Swiper实例，并将其绑定到容器元素上。例如： ```javascript var mySwiper = new Swiper('.swiper-container', { // 选项 }); ``` 4. 在Swiper实例的选项中配置轮播图的相关参数，例如轮播方向、轮播速度、轮播效果等。例如： ```javascript var mySwiper = new Swiper('.swiper-container', { direction: 'horizontal', loop: true, autoplay: { delay: 3000, disableOnInteraction: false, }, effect: 'fade', }); ``` 5. 在CSS文件中设置轮播图容器元素和轮播图元素的样式，例如宽度、高度、背景色等。例如： ```css .swiper-container { width: 100%; height: 100%; background-color: #f5f5f5; } .swiper-slide { width: 100%; height: 100%; background-color: #fff; } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值