幻灯片/轮播
仿阴阳师官网jQuery图片轮播插件
PetitQ
这是一款高仿阴阳师官网的 jquery 轮播图插件。该轮播图为无限轮播插件，轮播方式为横向滚动（仅支持此方式）。由于本插件使用了大量 CSS3 属性，对于低版本浏览器（如 ie9 以下版本等不支持 CSS3 属性的浏览器）不兼容。
使用方法
在页面中引入 jquery 和 jquery-yys-slider.js 以及 jquery-yys-slider 文件。
也想出现在这里？联系我们吧
<link rel="stylesheet" href="css/jquery-yys-slider.css" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/jquery-yys-slider.js"></script>
HTML 结构
该 jquery 轮播图的基本 HTML 结构如下：
<div class="content-part part-tese">
<div class="content-title"></div>
<div class="shadow"></div>
<div class="gallery_container">
<div class="gallery_wrap threeD_gallery_wrap">
<div href="javascript:;" class="gallery_item threeD_gallery_item gallery_left_middle">
<img src="..." class="show">
<div class="line-t"></div>
<div class="line-r"></div>
<div class="line-b"></div>
<div class="line-l"></div>
</div>
<div href="javascript:;" class="gallery_item threeD_gallery_item front_side">
<img src="..." class="show">
<div class="line-t"></div>
<div class="line-r"></div>
<div class="line-b"></div>
<div class="line-l"></div>
</div>
<div href="javascript:;" class="gallery_item threeD_gallery_item gallery_right_middle">
<img src="..." class="show">
<div class="line-t"></div>
<div class="line-r"></div>
<div class="line-b"></div>
<div class="line-l"></div>
</div>
<div href="javascript:;" class="gallery_item threeD_gallery_item gallery_out">
<img src="..." class="show">
<div class="line-t"></div>
<div class="line-r"></div>
<div class="line-b"></div>
<div class="line-l"></div>
</div>
...
(<div href="javascript:;" class="gallery_item threeD_gallery_item gallery_out">
<img src="..." class="show">
<div class="line-t"></div>
<div class="line-r"></div>
<div class="line-b"></div>
<div class="line-l"></div>
</div>) * n
<a class="prev" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
</div>
</div>
</div>
注意，轮播图的图片数量至少为 4 张。当图片数量大于 4 张时，需再添加类名为.gallery_out 的容器。
初始化插件
在页面 DOM 元素加载完毕之后，可以通过下面的方法来初始化该 jquery 轮播图插件。
$(".gallery_container").gallery_slider({imgNum: 4 //轮播图数量至少为4张
});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
