仿阴阳师官网jquery轮播图插件

这是一款高仿阴阳师官网的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