仿阴阳师官网jquery轮播图

最新推荐文章于 2021-11-29 12:21:48 发布
最新推荐文章于 2021-11-29 12:21:48 发布
阅读量817 收藏 5
点赞数 1
分类专栏： jquery特效
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿阴阳师官网jquery轮播图插件</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" href="css/jquery-yys-slider.css">
</head>
<body>
<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" style="margin-left: -360px; margin-top: -260px;">
<div href="javascript:;" class="gallery_item threeD_gallery_item gallery_left_middle">
  <img src="http://i2.bvimg.com/625515/517d9d8b0a44a5c6.jpg" 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="http://i2.bvimg.com/625515/24379ebfa9c6cc00.jpg" 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="http://i2.bvimg.com/625515/cecb839e444046a2.jpg" 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="http://i2.bvimg.com/625515/d658cf968df915a9.jpg" 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="http://i2.bvimg.com/625515/34c71fe757d3a8e0.jpg" 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="http://i2.bvimg.com/625515/34c71fe757d3a8e0.jpg" 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="http://i2.bvimg.com/625515/34c71fe757d3a8e0.jpg" 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="http://i2.bvimg.com/625515/34c71fe757d3a8e0.jpg" class="show">
  <div class="line-t"></div>
  <div class="line-r"></div>
  <div class="line-b"></div>
  <div class="line-l"></div>
</div>
  </div>
  <a class="prev" href="javascript:;"></a>
  <a class="next" href="javascript:;"></a>
</div>
  </div>


<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="js/jquery-yys-slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.content-part.part-tese').addClass('show');
$('.gallery_container').gallery_slider({imgNum: 8});   //imgNum: 图片数量
})
</script>

</body>
</html>
 


-------------------------
**normalize.css**
---------------------------------------------------
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}

--------------------------------
**jquery-yys-slider.css**
---------------------------------------------------
body{background:url(http://i2.bvimg.com/625515/ba304a9585fb5e12.jpg) no-repeat 50% 0;font-family: '微软雅黑';}
h2{width: 960px;margin: 20px auto;font-size: 18px;line-height: 25px;font-weight: normal;position: absolute;left: 50%;margin-left: -480px;color: #fff;z-index: 1;}
.part-tese{height:850px;top:0}
.content-part{position:absolute;width:1200px;left:50%;margin-left:-600px;margin-top: 50px;}
.content-part.show .content-title{opacity:1;transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);transition:all 1s;-webkit-transition:all 1s;-moz-transition:all 1s;-o-transition:all 1s}
.part-tese .content-title{background:url(http://i2.bvimg.com/625515/02273a2231a643ff.png) no-repeat center}
.content-part .content-title{opacity:0;transform:translateY(50px);-ms-transform:translateY(50px);-webkit-transform:translateY(50px);-moz-transform:translateY(50px);-o-transform:translateY(50px)}
.content-part .content-title{position:absolute;width:650px;height:263px;top:0;left:50%;margin-left:-325px}
.part-tese .shadow{position:absolute;width:1014px;height:190px;bottom:0;left:50%;margin-left:-507px;background:url(http://i2.bvimg.com/625515/d618e8dcb9c80871.png)}
.part-tese.show .gallery_container{opacity:1;transform:translateY(0);-ms-transform:translateY(0);-webkit-transform:translateY(0);-moz-transform:translateY(0);-o-transform:translateY(0);transition:all 1s .1s;-webkit-transition:all 1s .1s;-moz-transition:all 1s .1s;-o-transition:all 1s .1s}
.part-tese .gallery_container{position:absolute;width:1000px;height:550px;top:210px;left:50%;margin-left:-500px}
.part-tese .gallery_container.st02{top:800px}
.part-tese .gallery_container{opacity:0;transform:translateY(200px);-ms-transform:translateY(200px);-webkit-transform:translateY(200px);-moz-transform:translateY(200px);-o-transform:translateY(200px)}
.gallery_container{position:absolute;top:0;left:0}
.part-tese .gallery_container .gallery_wrap{width:720px;height:520px}
.gallery_container .gallery_wrap{width:320px;height:474px}
.threeD_gallery_wrap{position:absolute;left:50%;top:50%;-webkit-perspective:1000px;-moz-perspective:1000px;-ms-perspective:1000px;perspective:1000px}
.front_side{z-index:5;-webkit-transform:rotateY(0) translateX(0) translateZ(0);-moz-transform:rotateY(0) translateX(0) translateZ(0);-ms-transform:rotateY(0) translateX(0) translateZ(0);-o-transform:rotateY(0) translateX(0) translateZ(0);transform:rotateY(0) translateX(0) translateZ(0)}
.threeD_gallery_item{position:absolute;width:100%;height:100%;cursor:pointer;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-ms-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease}
.part-tese .gallery_right_middle{z-index:3;transform:rotateY(-30deg) translateX(200px) translateZ(-300px) scale(.6);-ms-transform:rotateY(-30deg) translateX(200px) translateZ(-300px) scale(.6);-webkit-transform:rotateY(-30deg) translateX(200px) translateZ(-300px) scale(.6);-moz-transform:rotateY(-30deg) translateX(200px) translateZ(-300px) scale(.6);-o-transform:rotateY(-30deg) translateX(200px) translateZ(-300px) scale(.6)}
.gallery_right_middle{z-index:3;-webkit-transform:rotateY(-55deg) translateX(90px) translateZ(-364px) scale(.95);-moz-transform:rotateY(-55deg) translateX(90px) translateZ(-364px) scale(.95);-ms-transform:rotateY(-55deg) translateX(90px) translateZ(-364px) scale(.95);-o-transform:rotateY(-55deg) translateX(90px) translateZ(-364px) scale(.95);transform:rotateY(-55deg) translateX(90px) translateZ(-364px) scale(.95)}
.gallery_out{-webkit-transform:rotateY(0) translateX(0) translateZ(0) scale(.6);-moz-transform:rotateY(0) translateX(0) translateZ(0) scale(.6);-ms-transform:rotateY(0) translateX(0) translateZ(0) scale(.6);-o-transform:rotateY(0) translateX(0) translateZ(0) scale(.6);transform:rotateY(0) translateX(0) translateZ(0) scale(.6);z-index:-1;opacity:0!important}
.part-tese .gallery_left_middle{z-index:3;transform:rotateY(30deg) translateX(-200px) translateZ(-300px) scale(.6);-ms-transform:rotateY(30deg) translateX(-200px) translateZ(-300px) scale(.6);-webkit-transform:rotateY(30deg) translateX(-200px) translateZ(-300px) scale(.6);-moz-transform:rotateY(30deg) translateX(-200px) translateZ(-300px) scale(.6);-o-transform:rotateY(30deg) translateX(-200px) translateZ(-300px) scale(.6)}
.gallery_left_middle{z-index:3;-webkit-transform:rotateY(55deg) translateX(-90px) translateZ(-364px) scale(.95);-moz-transform:rotateY(55deg) translateX(-90px) translateZ(-364px) scale(.95);-ms-transform:rotateY(55deg) translateX(-90px) translateZ(-364px) scale(.95);-o-transform:rotateY(55deg) translateX(-90px) translateZ(-364px) scale(.95);transform:rotateY(55deg) translateX(-90px) translateZ(-364px) scale(.95)}
.part-tese .gallery_container .gallery_wrap img{width:100%}
.gallery_container .gallery_item img.show{visibility:visible}
.gallery_container .gallery_item img{width:100%;height:100%;visibility:hidden}
.part-tese .gallery_container .gallery_wrap .line-b,.part-tese .gallery_container .gallery_wrap .line-l,.part-tese .gallery_container .gallery_wrap .line-r,.part-tese .gallery_container .gallery_wrap .line-t{position:absolute;background:#fff}
.part-tese .gallery_container .gallery_wrap .front_side .line-t{width:700px;transition:all .2s .2s;-webkit-transition:all .2s .2s;-moz-transition:all .2s .2s;-o-transition:all .2s .2s}
.part-tese .gallery_container .gallery_wrap .line-t{height:1px;width:0;top:10px;left:10px}
.part-tese .gallery_container .gallery_wrap .front_side .line-r{height:500px;transition:all .2s .4s;-webkit-transition:all .2s .4s;-moz-transition:all .2s .4s;-o-transition:all .2s .4s}
.part-tese .gallery_container .gallery_wrap .line-r{width:1px;height:0;right:10px;top:10px}
.part-tese .gallery_container .gallery_wrap .front_side .line-b{width:700px;transition:all .2s .6s;-webkit-transition:all .2s .6s;-moz-transition:all .2s .6s;-o-transition:all .2s .6s}
.part-tese .gallery_container .gallery_wrap .line-b{height:1px;width:0;bottom:10px;right:10px}
.part-tese .gallery_container .gallery_wrap .front_side .line-l{height:500px;transition:all .2s .8s;-webkit-transition:all .2s .8s;-moz-transition:all .2s .8s;-o-transition:all .2s .8s}
.part-tese .gallery_container .gallery_wrap .line-l{width:1px;height:0;left:10px;bottom:10px}
.gallery_container .prev{left: 0;}
.gallery_container .next{right: 0;}
.gallery_container .prev,.gallery_container .next{position: absolute;top: 15px;width: 140px;height: 520px;z-index:99;}

-----------------
**jquery-yys-slider.js**
---------------------------------------------------
(function($) {
	$.fn.gallery_slider = function(options) {
	  var _ops = $.extend({
	      imgNum: 5 , //图片数量
	      gallery_item_left: '.prev' , //左侧按钮
	      gallery_item_right: '.next' , //右侧按钮
	      gallery_left_middle: '.gallery_left_middle', //左侧图片容器
	      gallery_right_middle: '.gallery_right_middle', //左侧图片容器
	      threeD_gallery_item: '.threeD_gallery_item' //图片容器
	  }, options);
	  var _this = $(this),
	  		_imgNum = _ops.imgNum, //图片数量
	  		_gallery_item_left = _ops.gallery_item_left, //左侧按钮
	  		_gallery_item_right = _ops.gallery_item_right, //右侧按钮
	  		_gallery_left_middle = _ops.gallery_left_middle, //左侧图片容器
	  		_gallery_right_middle = _ops.gallery_right_middle, //左侧图片容器
	  		_threeD_gallery_item = _ops.threeD_gallery_item; //图片容器
	  		
  	//左侧按钮绑定点击事件
  	_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');
		})
	};
})(jQuery);


一梦醉殇
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
web前端大作业(基于HTML+CSS+JavaScript仿阴阳师游戏官网首页作业制作)
qq_38518191的博客
04-05 244
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保
轮播图的插件
12-18
简单的轮播插件，勿喷，不会的可以看看里面的代码对自己进行一些提高
仿阴阳师官网首页/欢迎页、另附带自制特效页.rar
05-23
仿阴阳师官网首页/欢迎页、另附带自制特效页.rar
高仿阴阳师官网轮播图效果的jQuery插件
weixin_34418883的博客
03-06 215
代码地址如下：http://www.demodashi.com/demo/12302.html 插件介绍 这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件，主要应用于定制个性化场景，目前源码完全公开，如有需要，可根据自己的需求修改源码样式下面是一个演示页面截图（建议使用新版谷歌、火狐浏览器观看，对于ie9以下不支持CSS3属性的浏览器不兼容）。 在插件包中，包含新旧两个版本的插件js源码，区...
HTML5期末大作业：仿阴阳师游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板
11-29 1267
HTML5期末大作业：仿阴阳师游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载 网游大学生HTML网页制作作品 简单游戏网页设计成品 dreamweaver学生网站模板 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业
模仿阴阳师官网html+css.zip
07-17
模仿阴阳师官网html+css 模仿阴阳师官网html+css
仿阴阳师官网jquery轮播图插件
12-11
这是一款高仿阴阳师官网的jquery轮播图插件。该轮播图为无限轮播插件，轮播方式为横向滚动（仅支持此方式）。由于本插件使用了大量CSS3属性，对于低版本浏览器（如ie9以下版本等不支持CSS3属性的浏览器）不兼容。
jQuery图片叠加点击旋转切换特效代码
03-20
jQuery图片叠加点击旋转切换代码基于jquery-1.11.0.min.js制作，模仿阴阳师游戏官网点击图片旋转效果，图片叠加轮播效果，图片叠加轮播旋转切换代码。
阴阳师项目源码（动态网页）
04-04
适用于学完HTML和CSS或学完原生三件套的小伙伴，来进行一次综合大练习，进一步巩固所学知识。
阴阳师宣传页轮播特效
qq_45473439的博客
11-29 380
阴阳师宣传页轮播特效 最近用js做了一个阴阳师的特效轮播图，代码写的有点菜，但也是写出来了，分享一下，勿喷，哈哈！ 这个轮播图的主要特点是 1.以当前展示的图片为中心，当前图片转动角度为0 ，其他图片向两边依次递增递减30deg，并且translate3d Z轴方向的偏移量依次从中间向两边递减 2.当前现实的图片为高亮显示 其他为暗色 3.过渡时间 transition-duration 的控制 ...
一个仿苹果轮播图效果的jQuery插件
08-11
该轮播图效果为切换轮播图时会产生视差效果，以及文字的一个缩放效果。
jquery－slider.js
09-14
jquery－slider.js
3D轮播展示图片
l17768346260的博客
03-22 769
这两天做了个很有意思的小玩意儿~ 平面轮播方式展示图片显得很单调，立体效果的果然好很多~ 1.球状展示： 2.螺旋状展示： 3.文字或字母形式展示： 做字母或文字形式展示的时候一开始没有思路，后来想到了用白底带色彩字母或文字图片，识别图像中像素rgb值区分前景和背景，之后遍历每行每列（取合适的步长），将字母或文字像素位置映射到世界空间，再用图片进行填充。 ...
阴阳师网站源码 游戏官网源码
SEO资源下载
05-11 1183
简介： 阴阳师网站模仿源码 搭建简单，下载即可用。 网盘下载地址： http://kekewl.cc/HGxPMMwfuo50 图片：
前端旋转木马特效
weixin_42157001的博客
04-12 566
需要下载引入jquery-yys-slider.js和jquery-yys-slider.css，地址：https://github.com/yangyunhe369/jQuery-Yys-Slider 注意：该js文件基于jquery.js，引入文件之前一定要先引入query.js <link rel="stylesheet" href="css/jquery-yys-sl...
Docker学习笔记（一）:Docker的三个基本概念
Kunikida的专栏
05-24 4743
Docker 包括三个基本概念 镜像（Image）容器（Container）仓库（Repository） 理解了这三个概念，就理解了 Docker 的整个生命周期。 镜像Image Docker 镜像就是一个只读的模板。 例如：一个镜像可以包含一个完整的 ubuntu 操作系统环境，里面仅安装了 Apache 或用户需要的其它应用程序。 镜像可以用来创建 Docker 容器
画廊效果Gallery控件的使用(横向列表)
张圣华的博客
05-28 1294
笔记:Gallery与Spinner两个控件具有共同的父类：AbsSpinner，表示Gallery和Spinner都是一个列表框。它们之间的区别在于Spinner显示的是一个垂直的列表可选择框，而Gallery显示的是一个水平的列表拖动框，而且支持水平滑动的效果。
gallery
Barving的专栏
08-26 463
xml. <LinearLayout android:layout_marginTop="5dp" android:background="@color/white" android:id="@+id/linearlayout_top" android:layout_wi
用jQuery写一个阴阳师游戏目录
最新发布
05-17
好的，下面是一个简单的阴阳师游戏目录的jQuery代码： HTML代码： ```html 阴阳师游戏目录 <li><a href="#">式神图鉴</a></li> <li><a href="#">御魂副本</a></li> <li><a href="#">妖怪录</a></li> <li>...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值