章节
问答
笔记
评论
占位
占位

图片轮播--JavaScript触发方法

默认情况之下,如果 carousel 容器上定义了 data-ride="carousel" 属性,页面加载之后就会自动加载轮播图片切换效果。如果没有定义 data-ride 属性,可以通过 JavaScript 方法来触发轮播图片切换。具体使用方法如下:

$(".carousel").carousel();

也可以通过容器的 ID 来指定:

$("#slidershow").carousel();

在 carousel() 方法中可以设置具体的参数,如:

属性名称

类型

默认值

描述

interval

number

5000

幻灯片轮换的等待时间(毫秒)。如果为false,轮播将不会自动开始循环

pause

string

hover

默认鼠标悬停留在幻灯片区域即停止播放,离开即开始播放

wrap

布尔值

true

轮播是否持续循环

使用时,在初始化插件的时候可以传关相关的参数,如:

$("#slidershow").carousel({
       interval: 3000
});

实际上,当我们给carousel()方法配置参数之后,轮播效果就能自动切换。但 Bootstrap 框架中的 carousel 插件还给使用者提供了几种特殊的调用方法,简单说明如下:

  • .carousel("cycle"):从左向右循环播放;
  • .carousel("pause"):停止循环播放;
  • .carousel("number"):循环到指定的帧,下标从0开始,类似数组;
  • .carousel("prev"):返回到上一帧;
  • .carousel("next"):下一帧

例如,前面的调用方法,向前和向后两个按钮还无法正常工作,其实可以通过 .carousel("prev") 和 .carousel("next") 方法让他们能正常工作,代码如下:

$(function(){
    $("#slidershow").carousel({
        interval:2000
    });
    $("#slidershow a.left").click(function(){
        $(".carousel").carousel("prev");
    });
    $("#slidershow a.right").click(function(){
        $(".carousel").carousel("next");
    });
});

 

任务

我来试试:使用JS实现“图片自动轮播”和“向前、向后按钮”的功能实现

可以看到我们已经把 data-ride="carousel" 和  data-slide="prev"、 data-slide="next" 三个语句去掉了,我们来使用JS代码实现“图片自动轮播”和“向前、向后按钮”的功能实现。
 

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?