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>
暂无评论内容