bootstrap实现轮播图效果

本文实例为大家分享了bootstrap实现轮播图效果的具体代码,供大家参考,具体内容如下

实现效果

步骤

1、下载bootstrap和jquery-3.6.0.min.js,并在html中引用,注意jq.js应在全部js前引用

2、按照官网https://v3.bootcss.com/javascript/的Carousel实例修改导入图片,body源码如下

<div class="box">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="./images/xuezhong_1.jpg" alt="...">
                    <div class="carousel-caption">
                        图片1
                    </div>
                </div>
                <div class="item">
                    <img src="./images/guimizhizhu_2.jpg" alt="...">
                    <div class="carousel-caption">
                        图片2
                    </div>
                </div>
                <div class="item">
                    <img src="./images/jianlai_3.jpg" alt="...">
                    <div class="carousel-caption">
                        图片3
                    </div>
                </div>
                <div class="item">
                    <img src="./images/yichang_4.jpg" alt="...">
                    <div class="carousel-caption">
                        图片4
                    </div>
                </div>

            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
</div>

在style.css调整图片样式

.box {
    width: 600px;
    height: 300px;
    background-color: pink;
    margin: 100px auto;
}

.carousel,
.carousel img {
    width: 100%;
    height: 300px !important;
}

在js中添加轮播时间

<script>
        $('.carousel').carousel({
            interval: 2000
        })
</script>

可根据官网的指引修改需要的相关样式

步骤完成,bootstrap轮播图实现。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • bootstrap网格系统使用方法解析

    网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统.Bootstrap框架中的网格系统就是将容器平分成12份. 工作原理 1.数据行(.row)必须包含在容器(.container)中,以便为其赋予合适的对齐方式和内距(padding).如: <div class="container"> <div class="row"&

  • 拥Bootstrap入怀——导航栏篇

    写在前面 在该文中,我结合自己做的一个山水网页来聊一下Bootstrap的使用,网页截图如下: 完整网页的效果和代码可以点击这里查看或者到CodePen上查看.网页要达到的主要效果包括以下几点: 1.导航栏的登陆.注册按钮点击后弹出登陆.注册modal框,并且登陆.注册窗口可切换,菜单栏为响应式 2.导航栏中的山水选项可下拉,点击下拉中的九寨沟``丽江``水帘洞会定位到相应的tab 3.幻灯片大屏轮播 4.tab页点击切换 下面我们开始拥Bootstrap入怀. Bootstrap想必小伙伴们都

  • Bootstrap 网格系统布局详解

    Bootstrap 提供了一套响应式.移动设备优先的流式网格系统(Grid System),随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 一.什么是网格(Grid)? 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的.水平的)组成的结构(通常是二维的).它广泛应用于打印设计中的设计布局和内容结构.在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法. 一句话概括:网页设计中的网格用于组织内容,让网站易于浏览,并降低用户

  • BootStrap导航栏问题记录

    今天完成的事情:(实现了test9的响应式导航栏的垂直平分和下拉列表的居中问题.) 我觉得最麻烦的就是要在bootstrap的格式下修改.我弄了好多次demo来虐导航栏.但是一直都没有头绪.知道昨晚在完玩狼人杀后,突然灵机一闪. 能不能通过内部的固定高度,来实现垂直平分的效果呢. 在查看psd图的效果是导航栏的a是垂直平分的. 那么我可否通过固定a超链接的高度来实现垂直平分呢? <div "h-nav"> <nav "container navbar nav

  • bootstrap轮播模板使用方法详解

    本文实例为大家分享了bootstrap轮播模板展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <link rel="stylesheet" href="https://cdn.bootcss

  • Javascript Bootstrap的网格系统,导航栏和轮播详解

    目录 bootstrap简介及其相关内容 网格系统 列嵌套 列偏移 列排序 导航栏 轮播 总结 bootstrap简介及其相关内容 Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.引用其时需要具备一定的基本模板: <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=&q

  • BootStrap实现轮播图效果(收藏)

    今天学习bootstrap,发现轮播图的实现很强大,于是记录下来,方便自己以后使用. 1:相关知识总结 carousel slide:整个轮播图的最外边一层的样式 data-ride:用于标记轮播在页面加载时就开始动画播放 data-interval:自动循环每个项目之间延迟的时间量.如果为 false,轮播将不会自动循环 data-wrap:轮播是否连续循环 carousel-indicators:轮播图的小圆点 data-target: data-slide-to:向轮播传递一个原始滑动索引

  • bootstrap实现轮播图效果

    本文实例为大家分享了bootstrap实现轮播图效果的具体代码,供大家参考,具体内容如下 实现效果 步骤 1.下载bootstrap和jquery-3.6.0.min.js,并在html中引用,注意jq.js应在全部js前引用 2.按照官网https://v3.bootcss.com/javascript/的Carousel实例修改导入图片,body源码如下 <div class="box"> <div id="carousel-example-generi

  • Bootstrap实现基于carousel.js框架的轮播图效果

    本文实例为大家分享了Bootstrap轮播图效果展示的具体代码,供大家参考,具体内容如下 声明式触发需要使用到的几个data-*属性 1.data-ride:作用在最外层容器上,固定值:carousel 2.data-target:作用在class=carousel-indicators的每个子元素li上面,标注对那个元素进行点击轮播 3.data-slide:作用在前翻页和后翻页的两个a链接上,prev表示前翻页,next表示后翻页 4.data-slide-to:作用在class=carou

  • 微信小程序实现Swiper轮播图效果

    本文实例为大家分享了微信小程序轮播图的具体代码,供大家参考,具体内容如下 1.逻辑层 mine.js // pages/mine/mine.js Page({ /** * 页面的初始数据 */ data: { /*轮播图 配置*/ imgUrls: [ 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg', 'http://img06.tooopen.com/images/20160818/tooopen_s

  • jQuery实现轮播图效果demo

    本文实例为大家分享了jQuery实现轮播图效果的具体代码,供大家参考,具体内容如下 效果展示: 编程思路: 1. 首先是基础的布局,使用"子绝父相"等页面布局方法,将图片.左右按钮以及每张图片下方对应的标识小按钮安排的明明白白. 2. JS中在通过点击左右按钮来切换图片时,使用三个变量分别来表示当前显示的图片序号.点击上一张按钮时候显示的图片序号.点击下一张按钮时候显示的图片序号. 3. 在自动轮播的时候,通过使用定时器来改变当前显示的图片序号来控制轮播 具体代码: HTML代码: &

  • JS实现轮播图效果

    本文实例为大家分享了JS实现轮播图展示的具体代码,供大家参考,具体内容如下 原理介绍 1.html <div id="swiper-container" class="swiper-container" onmouseenter="swiperImg()" onmouseleave="stopSwiper()"> <div id="img-list" style="left:0p

  • jQuery实现简洁的轮播图效果实例

    本文实例讲述了jQuery实现简洁的轮播图效果.分享给大家供大家参考,具体如下: HTML: <div class="ppt"> <a href="###"><img src="ppt/ppt1.jpg" /></a> <a href="###" style="display:none;"><img src="ppt/ppt2.jp

  • 简单实现轮播图效果的实例

    一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二.实现代码: html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

  • JS中Swiper的使用和轮播图效果

    Swiper是移动端的一款非常强大的触摸滑动插件,下面代码只展示一些常用的配置,具体可以查看官网api <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="swiper.min.cs

  • 使用html+js+css 实现页面轮播图效果(实例讲解)

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=

随机推荐