jR3DCarousel插件是一款响应式jQuery3D图片旋转切换特效,效果类似3D旋转木马，有多种3D图片切换效果可供选择，你可以在演示调到自己喜欢的效果。
JS代码：
<scriptsrc="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<scripttype="text/javascript"src="dist/jR3DCarousel.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
varslides=[{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'}]
varjR3DCarousel;
varcarouselProps={
width:400,/*largestallowedwidth*/
height:222,/*largestallowedheight*/
slideLayout:'fill',/*"contain"(fitaccordingtoaspectratio),"fill"(stretchesobjecttofill)and"cover"(overflowsboxbutmaintainsratio)*/
animation:'slide3D',/*slide|scroll|fade|zoomInSlide|zoomInScroll*/
animationCurve:'ease',
animationDuration:700,
animationInterval:1000,
//slideClass:'jR3DCarouselCustomSlide',
autoplay:false,
onSlideShow:show,/*callbackwhenSlideshoweventoccurs*/
navigation:'circles',/*circles|squares*/
slides:slides/*arrayofimagessourceorgetsslidesby'slide'class*/
}
functionsetUp(){
jR3DCarousel=$('.jR3DCarouselGallery').jR3DCarousel(carouselProps);$('.settings').html('<pre>$(".jR3DCarouselGallery").jR3DCarousel('+JSON.stringify(carouselProps,null,4)+')</pre>');
}
functionshow(slide){
console.log("Slideshown:",slide.find('img').attr('src'))
}
$('.carousel-propsinput').change(function(){
if(isNaN(this.value))
carouselProps[this.name]=this.value||null;
else
carouselProps[this.name]=Number(this.value)||null;
for(vari=0;i<999;i++)
clearInterval(i);
$('.jR3DCarouselGallery').empty();
setUp();
jR3DCarousel.showNextSlide();
})
$('[name=slides]').change(function(){
carouselProps[this.name]=getSlides(this.value);
for(vari=0;i<999;i++)
clearInterval(i);
$('.jR3DCarouselGallery').empty();
setUp();
jR3DCarousel.showNextSlide();
});
functiongetSlides(no){
slides=[];
for(vari=0;i<no;i++){
slides.push({src:'https://unsplash.it/'+Math.floor(1366-Math.random()*200)+''+Math.floor(768+Math.random()*200)})
}
returnslides;
}
//carouselProps.slides=getSlides(7);
setUp()})
</script>
下载
|
|
置顶卡
变色卡