使用简单,可以添加各种尺寸的图片,效果很好,同时适配效果也不错,现在给出制作的步骤,如果需要源码我也给大家提供了,请看完下面下载
1、所需js、css文件(jquery-1.11.0.min.js、galleria-1.3.5.min.js、galleria.classic.js、galleria.classic.css)
2、Quick Start
1、安装jquery
在<head></head>标签中添加
<script src=" jquery-1.11.0.min.js "></script> <script src="galleria/galleria-1.3.4.min.js"></script>
2、设置样式:
Width:设置轮播的宽度
Height:设置轮播的高度(必填)
<style> .galleria{ width: 700px; height: 400px; background: #000 } </style>
3、在<body></bodty>中加入(照片自己找)
<div class="galleria"> <img src="photo1.jpg"> <img src="photo2.jpg"> <img src="photo3.jpg"> </div>
4、加载主题
<script> Galleria.loadTheme('galleria.classic.min.js'); Galleria.run('.galleria');//运行主题js包 .galleria为div中的class </script>
完整代码:
<!doctype html>
<html>
<head>
<script src=" jquery-1.11.0.min.js "></script>
<scriptsrc="galleria/galleria-1.3.4.min.js"></script>
</head>
<body>
<div class="galleria">
<img src="photo1.jpg">
<img src="photo2.jpg">
<img src="photo3.jpg">
</div>
<script>
Galleria.loadTheme('galleria.classic.min.js');
Galleria.run('.galleria');
</script>
</body>
</html>