代码地址如下:
http://www.demodashi.com/demo/12302.html

插件介绍

这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开,如有需要,可根据自己的需求修改源码样式下面是一个演示页面截图(建议使用新版谷歌、火狐浏览器观看,对于ie9以下不支持CSS3属性的浏览器不兼容)。

在插件包中,包含新旧两个版本的插件js源码,区别主要在于控制移动样式上面,可根据自身需求修改对应css样式及插件部分代码,实现个性化定制。

其中index.html对应新版demo页面,demo_old.html对应旧版demo页面。

js文件夹目录下包括jquery-yys-slider.js新版 js 源码,jquery-yys-slider-old.js旧版 js 源码。

实现逻辑

一般的轮播图插件实现的原理,其实就是中间有一个刚好显示一张轮播图的视窗,然后控制轮播图的横向或是纵向的一个移动,来达到轮播图切换的效果。

下面主要讲一讲我当时做这个轮播图的一些思路和逻辑吧,这个轮播图插件主要实现原理与这个方式稍有差别,主要体现在这里不用控制轮播图的位移,只需要控制轮播图的class的切换,即可达到类似位移的效果。

这里我就以四图轮播的方式讲解一下。

首先,从这个轮播图的初始位置上观察,暂且用所有图片容器对应的下标作为标识,即类名为”.gallery_wrap”的 4 个子元素,分别对应 0, 1, 2, 3。在这种图中前三个图片容器都分别展示出来了,最后一个下标为 3 的元素被前面的元素遮挡住了。

下面这两张图片,是从初始位置,连续点击两次左侧按钮发生的类名变化以及位移。

从这三张图片中,不难发现,这里面的规律的:当我们观察 i == 0 的图片时,可以发现这个图片容器的类名依次变化顺序(”.gallery_left_middle” ==> “.front_side” ==> “.gallery_right_middle” ==> “.gallery_out” ==> “.gallery_left_middle”…)。实际上轮播的原理,就是让每个图片容器的类名变化,从而改变其css定位,来实现的位移效果。

核心代码

轮播图的位移,实际是靠控制轮播图的类名变化实现的

//左侧按钮绑定点击事件
_this.find(_gallery_item_left).on('click',function(){
var idx = parseInt(_this.find(_gallery_left_middle).index());
//当前展示图片逻辑
_this.find(_threeD_gallery_item).eq(idx).removeClass('gallery_left_middle').addClass('front_side');
//当idx值为0时,执行逻辑
_this.find(_threeD_gallery_item).eq(idx == 0 ? idx + _imgNum - 1 : idx - 1).removeClass('gallery_out').addClass('gallery_left_middle');
//当idx值为_imgNum - 3时,执行逻辑
_this.find(_threeD_gallery_item).eq(idx == _imgNum - 3 ? idx + 2 : idx - _imgNum + 2).removeClass('gallery_right_middle').addClass('gallery_out');
//当idx值为_imgNum - 2时,执行逻辑
_this.find(_threeD_gallery_item).eq(idx == _imgNum - 2 ? idx + 1 : idx - _imgNum + 1).removeClass('front_side').addClass('gallery_right_middle');
})
//右侧按钮绑定点击事件
_this.find(_gallery_item_right).on('click',function(){
var idx = parseInt(_this.find(_gallery_right_middle).index());
//当前展示图片逻辑
_this.find(_threeD_gallery_item).eq(idx).removeClass('gallery_right_middle').addClass('front_side');
//当idx值为0时,执行逻辑
_this.find(_threeD_gallery_item).eq(idx == 0 ? idx + _imgNum - 1 : idx - 1).removeClass('front_side').addClass('gallery_left_middle');
//当idx值为1时,执行逻辑
_this.find(_threeD_gallery_item).eq(idx == 1 ? idx + _imgNum - 2 : idx - 2).removeClass('gallery_left_middle').addClass('gallery_out');
//当idx值为_imgNum - 2时,执行逻辑
_this.find(_threeD_gallery_item).eq(idx == _imgNum - 2 ? idx + 1 : idx - _imgNum + 1).removeClass('gallery_out').addClass('gallery_right_middle');
})

在这里可以看到,控制轮播图移动的实际为两个不可见的按钮,分别置于正面显示轮播图的左右两侧,如下图所示:



运行效果

下载附件后,直接打开index.htmldemo_old.html即可在浏览器中看到运行效果。

使用方法

调用轮播插件:
Html:
<div class="gallery_container"></div>
Javascript:
$(".gallery_container").gallery_slider({
imgNum: 4, // 轮播图数量至少为4张
imgArr: [ // 图片数组,图片数组长度应与图片数量保持一致
'images/xxx.jpg',
'images/xxx.jpg',
'images/xxx.jpg',
'images/xxx.jpg'
]
});

预览图:

预览地址:https://yangyunhe369.github.io/jQuery-Yys-Slider

高仿阴阳师官网轮播图效果的jQuery插件

代码地址如下:
http://www.demodashi.com/demo/12302.html

注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权

高仿阴阳师官网轮播图效果的jQuery插件的更多相关文章

  1. 小米官网轮播图js+css3+html实现

    官网轮播: 我的轮播: 重难点: 1.布局 2.图片和右下角小圆点的同步问题 3.setInterval定时器的使用 4.淡入淡出动画效果 5.左右箭头点击时,图片和小圆点的效果同步 6.另一种轮播思 ...

  2. 利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录)

    利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录)   作者:王可利(Star·星星) 总结: 今天学习的jQ类库的使用,代码重复的比较多需要完善.严格区分大小写,在 $(" ...

  3. 用vue写一个仿简书的轮播图

    原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...

  4. 纯CSS实现轮播图效果,你不知道的CSS3黑科技

    前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...

  5. photoSlider-原生js移动开发轮播图、相册滑动插件

    详细内容请点击 在线预览   立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...

  6. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  7. 用html +js+css 实现页面轮播图效果

    html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...

  8. JavaScript实现轮播图效果

    我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...

  9. 小程序实践(二):swiper组件实现轮播图效果

    swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...

随机推荐

  1. P2412 查单词

    题目背景 滚粗了的HansBug在收拾旧英语书,然而他发现了什么奇妙的东西. 题目描述 udp2.T3如果遇到相同的字符串,输出后面的 蒟蒻HansBug在一本英语书里面找到了一个单词表,包含N个单词 ...

  2. Codevs 2460 == BZOJ 1036 树的统计

     2460 树的统计 2008年省队选拔赛浙江 时间限制: 2 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 一棵树上有n个节点,编号分别为1 ...

  3. 常见的 Git 命令:

    开始一个工作区(参见:git help tutorial) clone 克隆一个仓库到一个新目录 init 创建一个空的 Git 仓库或重新初始化一个已存在的仓库 在当前变更上工作(参见:git he ...

  4. MySQL完整备份,还原

    # 备份 添加编码 --default-character-set=utf8 防止中文乱码 把.sql文件导入MySQL, 汉字出现乱码?在.sql文件头中添加:set names 'gbk'; 或  ...

  5. 八、 Java程序初始化的顺序(一)

    今天在写构造器方法的时候,遇到了一个小问题,由这个问题引发了一连串的思考,在一个Java类中变量与类的初始化执行顺序是什么样的呢?## 发现问题 class Student{ private Stri ...

  6. 修改linux 的bash 为zsh

    针对centos1.  yum -y install zsh git   2. git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh- ...

  7. Integer.ParseInt()异常

    这里传参数:bookPage.nextPage,action接收到的是string型. 程序需要将string转成int来使用. 用上try { pageNUmber = Integer.parseI ...

  8. 牛客网 牛客练习赛13 B.幸运数字Ⅱ-数组 or DFS

    B.幸运数字Ⅱ 链接:https://www.nowcoder.com/acm/contest/70/B来源:牛客网     这个题就是找出来数据范围内的所有的幸运数,然后直接区间累加起来就可以了. ...

  9. C++ | class size

    c++类大小和机器还有编译器有关.64位机器指针大小为8个字节,32位机器为4个字节. 每个实例在内存中都有一个独一无二的地址,为了达到这个目的,编译器往往会给一个空类隐含的加一个字节,这样空类在实例 ...

  10. android dagger2使用笔记

    Dependency Injecte(依赖注入) 首先写个不使用依赖注入的示例 interface // House.java public interface House { void prepar ...