素材网 素材网

jQuery 简洁3D图片旋转切换特效

下载资源()次

阅读次数()次

发布时间:2017-09-05

jQuery 简洁3D图片旋转切换特效
分享到:

用法简介:

来源:xw素材网


jQuery 简洁3D图片旋转切换特效。
文件引用:

<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>



   

相关标签:

网友评论:

评论

发表 剩余字数:20

一、不得利用本站危害国家安全、泄露国家秘密,不得侵犯国家社会集体的和公民的合法权益,不得利用本站制作、复制和传播不法有害信息!

二、互相尊重,对自己的言论和行为负责。

@ 2013 xwcms.net . All Rights Reserved. xw素材网 | 备案号:晋ICP备13005902号 联系管理员
×

邮箱订阅

什么是邮箱订阅?

邮箱订阅是xw素材网为jquery爱好者与web程序员提供一项以邮箱的方式发送最新jquery资源与素材资源的模式,用户只需在左侧填写正确的邮箱用户名与邮箱地址我们将每天推荐最新优质资源到用户邮箱。当然每份邮箱都会有一个取消订阅按钮,当用户点击取消按钮时我们将会停止对用户发送邮箱资源推送。再次感谢大家对xw素材网的支持与关注。