这是一款高仿阴阳师官网的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张 });
关于作者
- 作者:弦云孤赫(David Yang)
- 职业:web前端开发工程师
- 爱好:网游、音乐(吉他)
- QQ:314786482
- 微信:yangyunhe_yyh
该jquery轮播图的github地址为:https://github.com/yangyunhe369/jQuery-Yys-Slider