
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>










暂无评论内容