jQuery响应式图片灯箱预览效果幻灯片

1、准备好需要用到的图标。

2、新建html文档。

3、书写hmtl代码。

<div class='mian'>

  <h4>根据自定义属性对图片进行幻灯片效果</h4>

  data-title:定义图片标题 

  data-group:定义图片是否为一个集合

  data-id:定义唯一的标记符

<br/>

<br/>

  <h4>图片集合切换</h4>

  <img class='js-lightBox' data-title='picture-title-1-that so happiness time ' data-group='group-1'  src="images/1.jpg

  <img class='js-lightBox' data-title='picture-title1-2-that so happiness time ' data-group='group-1'  src="images/2.jpg

  <img class='js-lightBox' data-title='picture-title1-3-that so happiness time ' data-group='group-1'  src="images/3.jpg

  <img class='js-lightBox' data-title='picture-title1-4-that so happiness time ' data-group='group-1'  src="images/4.jpg

  <img class='js-lightBox' data-title='picture-title1-5-that so happiness time ' data-group='group-1'  src="images/5.jpg

  <img class='js-lightBox' data-title='picture-title1-6-that so happiness time ' data-group='group-1'  src="images/6.jpg

  <img class='js-lightBox' data-title='picture-title1-7-that so happiness time ' data-group='group-1'  src="images/7.jpg

  <img class='js-lightBox' data-title='picture-title1-8-that so happiness time ' data-group='group-1'  src="images/8.jpg

  <img class='js-lightBox' data-title='picture-title1-9-that so happiness time ' data-group='group-1'  src="images/9.jpg

  <img class='js-lightBox' data-title='picture-title1-10-that so happiness time ' data-group='group-1'  src="images/10.jpg

  <img class='js-lightBox' data-title='picture-title1-11-that so happiness time ' data-group='group-1'  src="images/11.jpg

  <img class='js-lightBox' data-title='picture-title1-12-that so happiness time ' data-group='group-1'  src="images/12.jpg

  <img class='js-lightBox' data-title='picture-title1-13-that so happiness time ' data-group='group-1'  src="images/13.jpg

  <img class='js-lightBox' data-title='picture-title1-14-that so happiness time ' data-group='group-1'  src="images/14.jpg

<br/>

</div>

4、书写css代码。

<style>

  body{

background:#f1f1f1;

  }

  h4{

padding-bottom: 15px;

border-bottom: thin solid #999;

  }

  .mian{

padding:20px;

  }

</style>

5、书写并添加js代码。

<script src="js/jquery.min.js"></script>

<script src='js/lightBox.js'></script>

<script>

jQuery(document).ready(function($) {

  $.LightBox({speed:500})

});

</script>

6、代码整体结构。

7、查看效果。