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

图片灯箱插件——lightBox

该插件可以用圆角的方式展示选择中的图片,使用按钮查看上下张图片,在加载图片时自带进度条,还能以自动播放的方式浏览图片,调用格式如下:

$(linkimage).lightBox({options})

其中linkimage参数为包含图片的<a>元素名称,options为插件方法的配置对象。

例如,以列表的方式在页面中展示全部的图片,当用户单击其中某张图片时,通过引入的图片插件,采用“灯箱”的方式显示所选的图片,如下图所示:

在浏览器中显示的效果:

从图中可以看出,当用户点击“我的相册”中某一张图片时,则采用“灯箱”的方式显示选中图片,在显示图片时,还可以切换上下张和自动播放及关闭图片。

任务

我来试试,亲自调用图片灯箱插件显示相册中选中的图片。

在下列代码的第35行,调用图片灯箱插件的lightBox()方法,实现选中图片的“灯箱”式显示效果。

?不会了怎么办
  1. 首先,获取包含图片的<a>元素,然后,通过这些元素调用lightBox()方法则可以实现以“灯箱”方式显示选中图片的效果。
  2. “lightBox”方法名称书写是否正确,必须区分大小写。
||
1
<!DOCTYPE html
    PUBLIC "
    -//W3C//DTD
    XHTML 1.0
    Transitiona
    l//EN"
    "http://www
    .w3.org/TR
    /xhtml1/DTD
    /xhtml1
    -transition
    al.dtd">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
#divtest
{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / qaid2017
"http"改为“https”<link rel="stylesheet" type="text/css" href="https://www.imooc.com/data/jquery.notesforlightbox.css" /><script type="text/javascript" src="https://www.imooc.com/data/jquery-1.8.2.min.js"></script><script type="text/java...

已采纳回答 / 幕容峰
?是导师提示你要在此处填上你理解后的代码,并使其能够正确运行

已采纳回答 / 亦无安元
我的理解是,<div class="content">是为样式而设置的,这样可以将<div class="divPics">作为一个整体来设置一些css属性

最新回答 / 泡泡666
我看了下代码 确实是左右箭头图片大小本身的原因 这个可以修改样式解决的;不过现在这个插件用的地方不多,常用swiper

最新回答 / Mr春娇与志明
我也在网上下过这个版本的,替换慕课网上的jquery-1.8.2.min.js,发现效果出不来,最后还是老实的复制慕课网上的src,用的它的jquery-1.8.2.min.js

最新回答 / 旅行的风筝
这个问题你不应该来这个地方问,这个地方都是新手,谁知道用处逛不逛。既然有专门插件,说明能够用的地方还是蛮多的。

最新回答 / qq_MiraclesHapp_0
现在很少用,知道有这个方法就行了

最新回答 / qq_Material_0
学到这个地方还在问这个问题,我觉得是要批评一下了,批评归批评,我还是要讲解一下,在jquery官网上,有各种版本的jquery插件,可以下载到本地,然后通过本地路径引入到你的代码就可以了,这是第一种方法,第二种方法就是采用cdn,目前建议你使用官网的cdn,找到对应版本的cdn,复制cdn的链接,使用时直接插入你的代码就ok了

已采纳回答 / qq_巧克力人生
        <link rel="stylesheet" type="text/css" href="http://www.imooc.com/data/jquery.notesforlightbox.css" />        <script type="text/javascript" src="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>        <script type="te...

已采纳回答 / GreedyWalf
百度啊 或者简单的方法 直接将慕课网中的js链接 复制在浏览器中打开 然后自己复制保存成js就好啦~~

已采纳回答 / qq_柠檬不萌i_2
用setInterval,周期性调用

已采纳回答 / Stwvon3836464
lightBox中的css样式并没有设置这个效果, 它是由慕课网中引入的一个css产生的,所以引用这个插件时不用担心有这个小黑线,除非你自己加了。这条黑线属于a标签,它的样式是这样设置的:<...code...>想去掉教程中的这条黑线可以给a标签加一个样式<...code...>
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言