多种3D图片旋转切换效果jQuery特效

多种3D图片旋转切换效果jQuery特效-精品资源网
多种3D图片旋转切换效果jQuery特效
此内容为免费资源,请登录后查看
0
免费资源

多种3D图片旋转切换效果jQuery特效

jR3DCarousel插件是一款响应式jQuery 3D图片旋转切换特效,效果类似3D旋转木马,有多种3D图片切换效果可供选择,你可以在演示调到自己喜欢的效果。

JS代码:

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

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容