博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
bootstrap的carousel图片轮播
阅读量:7166 次
发布时间:2019-06-29

本文共 782 字,大约阅读时间需要 2 分钟。

整个轮播是放在一个div .carousel和.slide的div中的,

包括3个部分:
1. 第一个部分indicator位于下方的指示器部分. 结构是一个ol和li, ol的类是carousel-indicators,li的属性有data-target, data-slide-to, 第一个data-slide-to=0, 第一个小圆点是class=active激活的, 注意li中只有属性和类, 是没有内容 的!!
2. 第二个部分是div .carousel-inner显示的内容框. 其中包含的每一个部分都是div.item 第一个是.active激活的. (每个item包括一个image和一个div.carousel-caption>hx+p
3. 第三个部分是左右的链接control:两个 a超链接标签, a .left .carousel-control, 一个属性是data-slide="prev" 另一个是a.right .carousel-control 属性是data-slide="next". 里面包含的是一个左右方向的图标.... 当然, 两个a超链接都要设置href=#mycarousel, 注意这里不是通过 data-target属性来实现的, 是通过a的href超链接属性来实现的 #mycarousel 即前面的轮播div容器

使用js可以控制, carousel的方法和现实方式:

$('.carousel').carousel({  interval: 2000 // 注意这里不要放分号!});

通过firefox下的控制台, 查看元素的类样式, 可以方便的修改 元素原来默认的颜色等样式, 如下图的 修改carousel默认的active indicators的颜色:

821299-20170210143329244-160000711.png

其中的活动指示点, 通过重载 来获得.

转载地址:http://nlvwm.baihongyu.com/

你可能感兴趣的文章
git - 简易指南
查看>>
cpu内存磁盘io过高问题处理
查看>>
spring aop中的propagation的7种配置的意思
查看>>
iptable
查看>>
matlab-高数 e e的几次方
查看>>
Windows 10 IoT on Raspberry Pi 2
查看>>
Use The Facade Class In The Tomcat
查看>>
游侠推荐:降级论
查看>>
Android第十二天
查看>>
【将门创投】如何让飘在半空的计算机视觉技术与需求落地?
查看>>
类中有其他类的对象时构造函数的初始化
查看>>
jQuery实现遮罩层
查看>>
我的友情链接
查看>>
AVFoundation框架实现二维码的扫描、二维码的生成
查看>>
Ubuntu 12.04.4 LTS 部署cap 二
查看>>
广度优先遍历-走迷宫
查看>>
手机测试用例-通话测试用例
查看>>
MyBatis学习总结(五)——实现关联表查询
查看>>
Java基础学习总结(19)——Java环境变量配置
查看>>
oraclelinux系统udev配置
查看>>