1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代艨位雅剖码。<div class='mian'> <h4>根据自定义属性对图片进行幻灯片效果</h4> <p>data-title:定义图片标题</p> <p>data-group:定义图片是否为一个集合</p> <p>data-id:定义唯一的标记符</p><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" width="150" height="100" /> <img class='js-lightBox' data-title='picture-title1-2-that so happiness time ' data-group='group-1' src="images/2.jpg" width="150" height="100" /> <img class='js-lightBox' data-title='picture-title1-3-that so happiness time ' data-group='group-1' src="images/3.jpg" width="150" height="100" /> <img class='js-lightBox' data-title='picture-title1-4-that so happiness time ' data-group='group-1' src="images/4.jpg" width="150" height="100" /> <img class='js-lightBox' data-title='picture-title1-5-that so happiness time ' data-group='group-1' src="images/5.jpg" width="150" height="100" /> <img class='js-lightBox' data-title='picture-title1-6-that so happiness time ' data-group='group-1' src="images/6.jpg" width="150" height="100" /> <img class='js-lightBox' data-title='picture-title1-7-that so happiness time ' data-group='group-1' src="images/7.jpg" width="150" height="100" /> <img class='js-lightBox' data-title='picture-title1-8-that so happiness time ' data-group='group-1' src="images/8.jpg" width="150" height="100" /> <img class='js-lightBox' data-title='picture-title1-9-that so happiness time ' data-group='group-1' src="images/9.jpg" width="150" height="100" /> <img class='js-lightBox' data-title='picture-title1-10-that so happiness time ' data-group='group-1' src="images/10.jpg" width="150" height="100" /> <img class='js-lightBox' data-title='picture-title1-11-that so happiness time ' data-group='group-1' src="images/11.jpg" width="150" height="100" /> <img class='js-lightBox' data-title='picture-title1-12-that so happiness time ' data-group='group-1' src="images/12.jpg" width="150" height="100" /> <img class='js-lightBox' data-title='picture-title1-13-that so happiness time ' data-group='group-1' src="images/13.jpg" width="150" height="100" /> <img class='js-lightBox' data-title='picture-title1-14-that so happiness time ' data-group='group-1' src="images/14.jpg" width="150" height="100" /><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、查看效果。
