使用jQuery实现简单实用的图片画廊效果(附代码)

本篇文章给大家分享一个使用jQuery实现的图片画廊效果,一款简单实用的jQuery图片画廊插件。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

图片画廊

看一下效果图:

1.jpg

点击图片时:

2.jpg

使用

使用也是很简单,代码如下:

<div id="photoGallery-container">
    <img class="photoGallery" data-src="img/1-1.jpg" src="img/1-1.jpg" data-id="pic_1" data-desc="图片1">
    <img class="photoGallery" data-src="img/1-2.jpg" src="img/1-2.jpg" data-id="pic_2" data-desc="图片2">
    <img class="photoGallery" data-src="img/1-3.jpg" src="img/1-3.jpg" data-id="pic_3" data-desc="图片3">
    <img class="photoGallery" data-src="img/1-4.jpg" src="img/1-4.jpg" data-id="pic_4" data-desc="图片4">
    <img class="photoGallery" data-src="img/1-5.jpg" src="img/1-5.jpg" data-id="pic_5" data-desc="图片5">
    <img class="photoGallery" data-src="img/1-6.jpg" src="img/1-6.jpg" data-id="pic_6" data-desc="图片6">
    <img class="photoGallery" data-src="img/1-7.jpg" src="img/1-7.jpg" data-id="pic_7" data-desc="图片7">
    <img class="photoGallery" data-src="img/1-8.jpg" src="img/1-8.jpg" data-id="pic_8" data-desc="图片8">
</div>

其中id为photoGallery-container的容器内存放自己想要展示的图片组,每个img都有一个.photoGallery的类和三个自定义的data-属性,分别是:

.photoGallery : 定义缩略图的样式,标识此图片是展示图片之一

src : 定义缩略图对应大图的路径

data-id : 定义图片的id

data-desc : 定义图片的描述

所以,这要满足以上四个很简单的条件,那么就能很轻松的使用了(PS:IE6不兼容)

github下载地址:https://github.com/JR93/photoGallery

本文转载自:https://www.cnblogs.com/jr1993/p/4695670.html

想要了解更多前端知识,可访问 前端开发学习!!

以上就是使用jQuery实现简单实用的图片画廊效果(附代码)的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » jQuery 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏