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>