bootstrap 2版本轮播图

使用bootstrap 2的轮播图遇到了一些小问题,在这里记录总结一下。

1.

问题:Uncaught TypeError: e is not a function。

原因:jquery.js没有放在bootstrap.js之前,按照要求以及JS的加载顺序来说,jq一定要放在bootstrap.js之前,查看代码果然是这个原因

2.

问题:点击圆点和左右切换按钮,没有效果,且不报错,但是轮播可以自动播放

原因:对bootstrap轮播图的不理解。

①控制图片切换的圆点属性“data-target”bootstrap已经绑定好事件了,而我这边只需要输入对应的容器ID给它响应事件就行了,我的data-target没有写对,所以无法跳转,并且出现:pause is undefined 错误。

这里有个原理解释,为防止链接失效,截图保存

②上一页下一页的href要绑定容器的ID,我这里依然是没有绑定对ID

下图颜色标注为重点注意

今日碎碎念:作为一个新人菜鸟,遇到这种问题,找了各种方法,最后才发现这样,过程中不知道该怎么解决,该如何下手解决真的很奔溃。只能靠自己慢慢找,各种度。这么点小问题都弄这么久,有点怀疑自己是否合适前端。

一边寻找解决办法,一边满心表情包。想过要放弃,但是还是得做下去,只要一天还在前端,心里再怎么奔溃还是得继续敲下去,顺便,玛德法克玛德法克玛德法克玛德法克玛德法克玛德法克玛德法克玛德法克玛德法克玛德法克玛德法克玛德法克玛德法克玛德法克玛德法克玛德法克玛德法克玛德法克玛德法克。

原文地址:https://www.cnblogs.com/kido050313/p/8311716.html

时间: 2024-10-01 06:02:17

bootstrap 2版本轮播图的相关文章

(新手向)基于Bootstrap的简单轮播图的手机实现

个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先是本地站点搭建:win+R输入mmc打开控制台,文件-添加/删除管理单元,Internet信息服务.添加确定,右侧基本信息,新建网站-把路径改了.设定一个端口号,手机浏览器就可以输入  电脑局域网ip:端口号 就可以连上去了. 接下来问题来了,一个个点击查看然后关闭图片是一件更不环保的事.何不做一个

第二百五十一节,Bootstrap项目实战--响应式轮播图

Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一.响应式轮播图 响应式轮播图

Angular与bootstrap轮播图的结合使用

在做项目中碰到一处这样的bootstrap的轮播图的使用,数据要用angular动态绑定上去.公司logo图片,职位,公司名称 记录下做完后踩的坑. 1. 首先是使用bootstrap的轮播图示例代码进行改造 <div id="myCarousel" class="carousel slide" interval="false"//此次不需要自动轮播,添加此声明 data-pause="pause" //鼠标悬停后移出后

Bootstrap实现轮播图

第一步:设计轮播图容器:div.carousel,添加slide平滑切换,并定义id,方便后面采用data属性来触发 <div class='carousel slide' id="turns-img"></div> 第二步:设计计数器:ol.carousel-indicators <ol class="carousel-indicators"> <li class="active"></li

BootStrap学习(7)_轮播图

一.轮播图 Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式.除此之外,内容也是足够灵活的,可以是图像.内嵌框架.视频或者其他您想要放置的任何类型的内容. 如果您想要单独引用该插件的功能,那么您需要引用BootStrap中的 carousel.js. 示例: 1.使用 Bootstrap 轮播(Carousel)插件显示了一个循环播放元素的通用组件.为了实现轮播,您只需要添加带有该标记的代码即可.不需要使用    data 属性,只需要简单的基于 clas

bootstrap轮播图 两侧半透明阴影

用bootstrap轮播图:Carousel插件,图片两侧影音实在碍眼,想去掉,首先发现有css里由opacity: 0.5这个东西来控制,全部改成opacity: 0.0,发现指示箭头也看不见了. 然后各种搜索,发现原来是应该这么改: .carousel-control.left { /*background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%); back

第124天:移动web端-Bootstrap轮播图插件使用

Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel 一.基本的轮播图实现 HTML代码 1 <!-- 2 以下容器就是整个轮播图组件的整体, 3 注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图 4 bootstrap.js

新手——bootstrap轮播图

使用bootstrap插件来写轮播图 1.   首先要写一个<div>容器:<div id="myCarousel" class="carousel" data-slide="carouse"></div> data-slide="carouse"可以让图片自己轮播,如果要把轮播图片居中,可以在容器外加上<div class="container"></

mobile_轮播图_transform 版本_transform 读写二合一

轮播图_transform 版本 关键点: 2D 变换 transform 不会改变 元素 在 文档流 中的位置 定位 position 会改变 元素 在 文档流 中的位置 touchstart 实现 无缝轮播: 创建两组图片,ulList.innerHTML = ulList.innerHTML; 1. 触屏时,如果是第一组的第一张图片,则瞬间切换到第二组的第一张图片: 2. 触屏时,如果是第二组的最后一张图片,则瞬间切换到第一组的最后一张. transform 读写二合一 关键点: argu