高仿阴阳师官网轮播图效果的jQuery插件
插件介绍
这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公开,如有需要,可根据自己的需求修改源码样式下面是一个演示页面截图(建议使用新版谷歌、火狐浏览器观看,对于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.html
或demo_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插件
注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权
高仿阴阳师官网轮播图效果的jQuery插件的更多相关文章
- 小米官网轮播图js+css3+html实现
官网轮播: 我的轮播: 重难点: 1.布局 2.图片和右下角小圆点的同步问题 3.setInterval定时器的使用 4.淡入淡出动画效果 5.左右箭头点击时,图片和小圆点的效果同步 6.另一种轮播思 ...
- 利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录)
利用JQ实现的,高仿 彩虹岛官网导航栏(学习HTML过程中的小记录) 作者:王可利(Star·星星) 总结: 今天学习的jQ类库的使用,代码重复的比较多需要完善.严格区分大小写,在 $(" ...
- 用vue写一个仿简书的轮播图
原文地址:用vue写一个仿简书的轮播图 先展示最终效果: Vue的理念是以数据驱动视图,所以拒绝通过改变元素的margin-top来实现滚动效果.写好css样式,只需改变每张图片的class即可实现轮 ...
- 纯CSS实现轮播图效果,你不知道的CSS3黑科技
前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
- photoSlider-原生js移动开发轮播图、相册滑动插件
详细内容请点击 在线预览 立即下载 使用方法: 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css& ...
- js实现轮播图效果(附源码)--原生js的应用
1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 用html +js+css 实现页面轮播图效果
html 页面 <html lang="en"> <head> <meta charset="UTF-8"> <met ...
- JavaScript实现轮播图效果
我又来了,同志们.老想你们了 捕获小可爱一枚. 下面进入正题:用JavaScript原生代码写轮播图效果. 具体效果就不多说了,网站上面的轮播效果我们都知晓.下面是展示代码 html代码: <d ...
- 小程序实践(二):swiper组件实现轮播图效果
swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属 ...
随机推荐
- P2412 查单词
题目背景 滚粗了的HansBug在收拾旧英语书,然而他发现了什么奇妙的东西. 题目描述 udp2.T3如果遇到相同的字符串,输出后面的 蒟蒻HansBug在一本英语书里面找到了一个单词表,包含N个单词 ...
- Codevs 2460 == BZOJ 1036 树的统计
2460 树的统计 2008年省队选拔赛浙江 时间限制: 2 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 一棵树上有n个节点,编号分别为1 ...
- 常见的 Git 命令:
开始一个工作区(参见:git help tutorial) clone 克隆一个仓库到一个新目录 init 创建一个空的 Git 仓库或重新初始化一个已存在的仓库 在当前变更上工作(参见:git he ...
- MySQL完整备份,还原
# 备份 添加编码 --default-character-set=utf8 防止中文乱码 把.sql文件导入MySQL, 汉字出现乱码?在.sql文件头中添加:set names 'gbk'; 或 ...
- 八、 Java程序初始化的顺序(一)
今天在写构造器方法的时候,遇到了一个小问题,由这个问题引发了一连串的思考,在一个Java类中变量与类的初始化执行顺序是什么样的呢?## 发现问题 class Student{ private Stri ...
- 修改linux 的bash 为zsh
针对centos1. yum -y install zsh git 2. git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh- ...
- Integer.ParseInt()异常
这里传参数:bookPage.nextPage,action接收到的是string型. 程序需要将string转成int来使用. 用上try { pageNUmber = Integer.parseI ...
- 牛客网 牛客练习赛13 B.幸运数字Ⅱ-数组 or DFS
B.幸运数字Ⅱ 链接:https://www.nowcoder.com/acm/contest/70/B来源:牛客网 这个题就是找出来数据范围内的所有的幸运数,然后直接区间累加起来就可以了. ...
- C++ | class size
c++类大小和机器还有编译器有关.64位机器指针大小为8个字节,32位机器为4个字节. 每个实例在内存中都有一个独一无二的地址,为了达到这个目的,编译器往往会给一个空类隐含的加一个字节,这样空类在实例 ...
- android dagger2使用笔记
Dependency Injecte(依赖注入) 首先写个不使用依赖注入的示例 interface // House.java public interface House { void prepar ...