幻灯片/轮播

仿阴阳师官网jQuery图片轮播插件

阿里云

仿阴阳师官网jQuery图片轮播插件
这是一款高仿阴阳师官网的 jquery 轮播图插件。该轮播图为无限轮播插件,轮播方式为横向滚动(仅支持此方式)。由于本插件使用了大量 CSS3 属性,对于低版本浏览器(如 ie9 以下版本等不支持 CSS3 属性的浏览器)不兼容。

使用方法

在页面中引入 jquery 和 jquery-yys-slider.js 以及 jquery-yys-slider 文件。

也想出现在这里?联系我们
创客主机
  1. <link rel="stylesheet" href="css/jquery-yys-slider.css" type="text/css" />
  2. <script src="js/jquery.min.js"></script>
  3. <script src="js/jquery-yys-slider.js"></script>

HTML 结构

该 jquery 轮播图的基本 HTML 结构如下:

  1. <div class="content-part part-tese">
    
  2.   <div class="content-title"></div>
    
  3.   <div class="shadow"></div>
    
  4.   <div class="gallery_container">
    
  5.     <div class="gallery_wrap threeD_gallery_wrap">
    
  6.       <div href="javascript:;" class="gallery_item threeD_gallery_item gallery_left_middle">
    
  7.         <img src="..." class="show">
    
  8.         <div class="line-t"></div>
    
  9.         <div class="line-r"></div>
    
  10.         <div class="line-b"></div>
    
  11.         <div class="line-l"></div>
    
  12.       </div>
    
  13.       <div href="javascript:;" class="gallery_item threeD_gallery_item front_side">
    
  14.         <img src="..." class="show">
    
  15.         <div class="line-t"></div>
    
  16.         <div class="line-r"></div>
    
  17.         <div class="line-b"></div>
    
  18.         <div class="line-l"></div>
    
  19.       </div>
    
  20.       <div href="javascript:;" class="gallery_item threeD_gallery_item gallery_right_middle">
    
  21.         <img src="..." class="show">
    
  22.         <div class="line-t"></div>
    
  23.         <div class="line-r"></div>
    
  24.         <div class="line-b"></div>
    
  25.         <div class="line-l"></div>
    
  26.       </div>
    
  27.       <div href="javascript:;" class="gallery_item threeD_gallery_item gallery_out">
    
  28.         <img src="..." class="show">
    
  29.         <div class="line-t"></div>
    
  30.         <div class="line-r"></div>
    
  31.         <div class="line-b"></div>
    
  32.         <div class="line-l"></div>
    
  33.       </div>
    
  34.       ...
    
  35.       (<div href="javascript:;" class="gallery_item threeD_gallery_item gallery_out">
    
  36.         <img src="..." class="show">
    
  37.         <div class="line-t"></div>
    
  38.         <div class="line-r"></div>
    
  39.         <div class="line-b"></div>
    
  40.         <div class="line-l"></div>
    
  41.       </div>) * n
    
  42.       <a class="prev" href="javascript:;"></a>
    
  43.       <a class="next" href="javascript:;"></a>
    
  44.     </div>
    
  45.   </div>
    
  46. </div>

注意,轮播图的图片数量至少为 4 张。当图片数量大于 4 张时,需再添加类名为.gallery_out 的容器。

初始化插件

在页面 DOM 元素加载完毕之后,可以通过下面的方法来初始化该 jquery 轮播图插件。

  1. $(".gallery_container").gallery_slider({
    
  2.   imgNum: 4 //轮播图数量至少为4张
    
  3. });

仿阴阳师官网 jQuery 图片轮播插件

已有 375 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!