<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jQuery 3D图片旋转切换特效 - 网页模板</title>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="dist/jR3DCarousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var slides = [{src: 'images/a1.png'}, {src: 'images/a2.png'}, {src: 'images/a3.png'}, {src: 'images/a4.png'},{src: 'images/a5.png'}, {src: 'images/a1.png'}, {src: 'images/a2.png'}, {src: 'images/a3.png'}]
var jR3DCarousel;
var carouselProps = {
width: 400, /* largest allowed width */
height: 222, /* largest allowed height */
slideLayout : 'fill', /* "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio) */
animation: 'slide3D', /* slide | scroll | fade | zoomInSlide | zoomInScroll */
animationCurve: 'ease',
animationDuration: 700,
animationInterval: 1000,
//slideClass: 'jR3DCarouselCustomSlide',
autoplay: false,
onSlideShow: show, /* callback when Slide show event occurs */
navigation: 'circles', /* circles | squares */
slides: slides /* array of images source or gets slides by 'slide' class */
}
function setUp(){
jR3DCarousel = $('.jR3DCarouselGallery').jR3DCarousel(carouselProps);
$('.settings').html('<pre>$(".jR3DCarouselGallery").jR3DCarousel('+JSON.stringify(carouselProps, null, 4)+')</pre>');
}
function show(slide){
console.log("Slide shown: ", slide.find('img').attr('src'))
}
$('.carousel-props input').change(function(){
if(isNaN(this.value))
carouselProps[this.name] = this.value || null;
else
carouselProps[this.name] = Number(this.value) || null;
for(var i = 0; i < 999; i++)
clearInterval(i);
$('.jR3DCarouselGallery').empty();
setUp();
jR3DCarousel.showNextSlide();
})
$('[name=slides]').change(function(){
carouselProps[this.name] = getSlides(this.value);
for (var i = 0; i < 999; i++)
clearInterval(i);
$('.jR3DCarouselGallery').empty();
setUp();
jR3DCarousel.showNextSlide();
});
function getSlides(no){
slides = [];
for ( var i = 0; i < no; i++) {
slides.push({src: 'https://unsplash.it/'+Math.floor(1366-Math.random()*200)+''+Math.floor(768+Math.random()*200)})
}
return slides;
}
//carouselProps.slides = getSlides(7);
setUp()
})
</script>
<style type="text/css">
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
background: darkcyan;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
.jR3DCarouselGallery,.jR3DCarouselGallery1 {
margin: 0 auto; /* optional - if want to center align */
}
.container {
text-align: center;
}
.wrapper {
padding-right: 10px;
padding-left: 10px;
width: 48%;
height: 299px;
float: left;
overflow: auto;
border-left: 1px solid #999;
}
.wrapper div {
margin: 8px auto;
}
</style>
</head>
<body>
<div class="container">
<h1>jQuery 3D图片旋转切换特效</h1>
<br/>
<div>
<div class="jR3DCarouselGallery"></div>
</div>
<br/>
<hr/>
<!--
<div>
<h2>jR3DCarousel Gallery - with slides in template </h2>
<div class="jR3DCarouselGallery">
<div class="jR3DCarouselCustomSlide"><img src="images/a1.png" /><div style="position: relative; bottom:18px; background: rgba(238, 238, 238, 0.69);">This is custom Text</div></div>
<div class="jR3DCarouselCustomSlide"><img src="images/a2.png" /><div style="position: relative; bottom:18px; background: rgba(238, 238, 238, 0.69);">This is custom Text</div></div>
<div class="jR3DCarouselCustomSlide"><img src="images/a3.png" /><div style="position: relative; bottom:18px; background: rgba(238, 238, 238, 0.69);">This is custom Text</div></div>
<div class="jR3DCarouselCustomSlide"><img src="images/a1.png" /><div style="position: relative; bottom:18px; background: rgba(238, 238, 238, 0.69);">This is custom Text</div></div>
<div class="jR3DCarouselCustomSlide"><img src="images/a2.png" /><div style="position: relative; bottom:18px; background: rgba(238, 238, 238, 0.69);">This is custom Text</div></div>
</div>
</div>
<br/>
<hr/> -->
</div>
<div class="wrapper">
<h2>Options for jR3DCarousel</h2>
<div class="carousel-props" >
<input type="radio" name="animation" value="slide" />slide
<input type="radio" name="animation" value="slide3D" checked="checked" />slide3D
<input type="radio" name="animation" value="scroll" />scroll
<input type="radio" name="animation" value="scroll3D" />scroll3D
<input type="radio" name="animation" value="fade" />fade
</div>
<div class="carousel-props" >
<input type="radio" name="slideLayout" value="fill" checked="checked" />fill
<input type="radio" name="slideLayout" value="contain" />contain
<input type="radio" name="slideLayout" value="cover" />cover
</div>
<div class="carousel-props" >
<input type="radio" name="animationCurve" value="ease" checked="checked" />ease
<input type="radio" name="animationCurve" value="ease-in" />ease-in
<input type="radio" name="animationCurve" value="ease-out" />ease-out
<input type="radio" name="animationCurve" value="ease-in-out" />ease-in-out
<input type="radio" name="animationCurve" value="linear" />linear
<input type="radio" name="animationCurve" value="cubic-bezier(0.4, 0.6, 0.11, 0.19)" />cubic-bezier(0.4, 0.6, 0.11, 0.19) curve
</div>
<div class="carousel-props" >
<input type="radio" name="navigation" value="circles" checked="checked" />circles
<input type="radio" name="navigation" value="squares" />squares
<input type="radio" name="navigation" value="" />None
</div>
<div class="carousel-props" >
<input type="radio" name="autoplay" value="true" checked="checked" />autoplay
<input type="radio" name="autoplay" value="" />manual
</div>
<div>
<input type="number" min="1" max="16" value="4" name="slides" /> Slides
<span class="carousel-props" >
<input type="number" min="0" max="2000" name="perspective" step="10" value="0" /> Perspective
</span>
</div>
<div class="carousel-props" >
<input type="range" min="100" max="1366" name="width" />Width
<input type="range" min="100" max="720" name="height" />Height
</div>
<div class="carousel-props" >
<input type="range" min="10" max="2000" name="animationDuration" />animationDuration
<input type="range" min="10" max="2000" name="animationInterval" />animationInterval
</div>
</div>
<div class="wrapper">
<h2>Code to getting started</h2>
<div class="settings"></div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';clear:both;">
<br><br><br>
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery 3D图片旋转切换特效.zip （5个子文件） 
jQuery 3D图片旋转切换特效 jiaoben4090 images 
a2.png 9KB a3.png 16KB a1.png 7KB
index.html 7KB dist 
jR3DCarousel.min.js 7KB资源评论
芝麻粒儿
- 粉丝: 6w+
最新资源
- 基于Cars im和Matlab的CACC协同式自适应巡航模型构建与模糊MPC算法实现 专业版
- SQL Server Management Studio 17.9.1语言切换中文问题解决，故障：先安装了英文，卸载后再安装中文，还是英文界面
- MATLAB环境下自适应Chirp模态分解算法：一维时间序列分析与故障诊断工具
- 红外弱小目标检测-IPI算法
- 机器人技术中质心侧偏角Simulink程序的设计与实现
- 南澳多端柔性直流输电示范工程：MMC-HVDC模型与Fortran源代码分享 全面版
- DevEco Studio安装本地模拟器时出现的问题及解决
- 基于S7-1200 PLC的四层电梯仿真模拟程序：博图V15与WinCC动画功能实现
- LabVIEW解析CAN报文与DBC文件：支持多格式离线解析及自定义特征索引ID的应用
- 飞翔的荷兰人带你轻松入门目标检测第一季（Yolo-v1）
- Python 项目示例：一个简单的 学生管理系统
- MATLAB实现基于留出法和k折交叉验证的六种神经网络分类预测
- 红外弱小目标检测-IPI算法
- 基于MATLAB的FFT频谱分析与滤波技术及其在波形数据处理中的应用
- LabVIEW叶片频率测量系统源码解析：安捷伦34401数据采集与处理实践
- 四旋翼飞行器PID与模糊PID控制：基于Simulink与Matlab的仿真优化及自主学习实践
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
