在Stack Overflow，我们喜欢轮播！
我们有很多轮播可供选择，
而且制作方式都可能略有不同。有些使用Javascript，有些则只是纯CSS。既然有很多选择，这里只是几个不同的示例。但是请注意，如果需要的话，我有责任就“它们的工作方式”提出任何澄清性问题，因为解释每一个都将是重复性的，有一些细微的差异。一些还包括预编译器（例如，
LESS 或 SASS ，以便正常工作）：
快速样本1
body { background: #eee; font-family: arial, helvetica, sans-serif; margin: 50px auto; padding: 0;}h1 { font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif; font-size: 36px; text-align: center;}h3 { font-family: 'Proxima Nova', 'Helvetica Neue', sans-serif; font-size: 22px; font-style: italic; color: #4e4e4e; text-align: center; margin-bottom: -100px;}#wrapper { width: 960px; margin: 0 auto;}#wrapper { perspective: 2500; -webkit-perspective: 2500; width: 800px; margin: 200px auto 0 auto; perspective-origin: 50% 150px; -webkit-perspective-origin: 50% 150px; transition: perspective, 1s; -o-transition: -o-perspective, 1s; -moz-transition: -moz-perspective, 1s; -webkit-transition: -webkit-perspective, 1s;}#image:hover { animation-play-state:paused; -o-animation-play-state:paused; -moz-animation-play-state:paused; -webkit-animation-play-state:paused;}@-webkit-keyframes spin { from { transform: rotateY(0); -o-transform: rotateY(0); -ms-transform: rotateY(0); -moz-transform: rotateY(0); -webkit-transform: rotateY(0); } to { transform: rotateY(-360deg); -o-transform: rotateY(-360deg); -ms-transform: rotateY(-360deg); -moz-transform: rotateY(-360deg); -webkit-transform: rotateY(-360deg); }}#image { margin: 0 auto; height: 300px; width: 400px; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; animation: spin 24s infinite linear; -moz-animation: spin 24s infinite linear; -o-animation: spin 24s infinite linear; -webkit-animation: spin 24s infinite linear;}.image { position: absolute; height: 300px; width: 400px; border-radius: 25px; background-color: rgba(0,0,0,0.6); text-align: center; font-size: 20em; color: #fff;}#image > .i1 { transform: translateZ(485px); -moz-transform: translateZ(485px); -o-transform: translateZ(485px); -ms-transform: translateZ(485px); -webkit-transform: translateZ(485px);}#image > .i2 { transform: rotateY(45deg) translateZ(485px); -moz-transform: rotateY(45deg) translateZ(485px); -o-transform: rotateY(45deg) translateZ(485px); -ms-transform: rotateY(45deg) translateZ(485px); -webkit-transform: rotateY(45deg) translateZ(485px);}#image > .i3 { transform: rotateY(90deg) translateZ(485px); -moz-transform: rotateY(90deg) translateZ(485px); -o-transform: rotateY(90deg) translateZ(485px); -ms-transform: rotateY(90deg) translateZ(485px); -webkit-transform: rotateY(90deg) translateZ(485px);}#image > .i4 { transform: rotateY(135deg) translateZ(485px); -moz-transform: rotateY(135deg) translateZ(485px); -o-transform: rotateY(135deg) translateZ(485px); -ms-transform: rotateY(135deg) translateZ(485px); -webkit-transform: rotateY(135deg) translateZ(485px);}#image > .i5 { transform: rotateY(180deg) translateZ(485px); -moz-transform: rotateY(180deg) translateZ(485px); -o-transform: rotateY(180deg) translateZ(485px); -ms-transform: rotateY(180deg) translateZ(485px); -webkit-transform: rotateY(180deg) translateZ(485px);}#image > .i6 { transform: rotateY(225deg) translateZ(485px); -moz-transform: rotateY(225deg) translateZ(485px); -o-transform: rotateY(225deg) translateZ(485px); -ms-transform: rotateY(225deg) translateZ(485px); -webkit-transform: rotateY(225deg) translateZ(485px);}#image > .i7 { transform: rotateY(270deg) translateZ(485px); -moz-transform: rotateY(270deg) translateZ(485px); -o-transform: rotateY(270deg) translateZ(485px); -ms-transform: rotateY(270deg) translateZ(485px); -webkit-transform: rotateY(270deg) translateZ(485px);}#image > .i8 { transform: rotateY(315deg) translateZ(485px); -moz-transform: rotateY(315deg) translateZ(485px); -o-transform: rotateY(315deg) translateZ(485px); -ms-transform: rotateY(315deg) translateZ(485px); -webkit-transform: rotateY(315deg) translateZ(485px);}img { border-radius: 25px;<body> <h1>View in Chrome or Safari</h1> <h3>(hover over to pause)</h3> <div id="wrapper"> <div id="image"> <div ><img src="https://dl.dropbox.com/u/80409395/Codepen/Noe-in-leaves.jpg"></div> <div ><img src="https://dl.dropbox.com/u/80409395/Codepen/Nat-sitting.jpg"></div> <div ><img src="https://dl.dropbox.com/u/80409395/Codepen/Nat-noodles.jpg"></div> <div ><img src="https://dl.dropbox.com/u/80409395/Codepen/Charlie-smiling.jpg"></div> <div ><img src="https://dl.dropbox.com/u/80409395/Codepen/Girls-in-leaves.jpg"></div> <div ><img src="https://dl.dropbox.com/u/80409395/Codepen/Natalie-smiling.jpg"></div> <div ><img src="https://dl.dropbox.com/u/80409395/Codepen/Charlie-sleeping.jpg"></div> <div ><img src="https://dl.dropbox.com/u/80409395/Codepen/Sledding.jpg"></div> </div> </div></body>快速样本2
var itemPositions = [];var numberOfItems = $('#scroller .item').length;function assignPositions() { for (var i = 0; i < numberOfItems; i++) { if (i === 0) { itemPositions[i] = 'left-hidden'; } else if (i === 1) { itemPositions[i] = 'left'; } else if (i === 2) { itemPositions[i] = 'middle'; } else if (i === 3) { itemPositions[i] = 'right'; } else { itemPositions[i] = 'right-hidden'; } } $('#scroller .item').each(function(index) { $(this).addClass(itemPositions[index]); });}function scroll(direction) { if (direction === 'prev') { itemPositions.push(itemPositions.shift()); } else if (direction === 'next') { itemPositions.unshift(itemPositions.pop()); } $('#scroller .item').removeClass('left-hidden left middle right right-hidden').each(function(index) { $(this).addClass(itemPositions[index]); });}$(document).ready(function() { assignPositions(); var autoScroll = window.setInterval("scroll('next')", 4000); $('#scroller').hover(function() { window.clearInterval(autoScroll); $('.nav').stop(true, true).fadeIn(200); }, function() { autoScroll = window.setInterval("scroll('next')", 4000); $('.nav').stop(true, true).fadeOut(200); }); $('.prev').click(function() { scroll('prev'); }); $('.next').click(function() { scroll('next'); });});html,body { height: 100%; margin: 0;}body { background: -webkit-linear-gradient(top, #4D4D4D 0, #4D4D4D 180px, #939393 400px);}.warning { margin: 10px auto 0; width: 500px; text-align: center; font-size: 20px;}#scroller { width: 500px; height: 200px; margin: 0 auto; padding: 50px 0; -webkit-perspective: 500px; -moz-perspective: 500px; -o-perspective: 500px;}#scroller .item { width: 500px; display: block; position: absolute; border-radius: 10px; -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.85, transparent), to(rgba(255, 255, 255, 0.15))); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; z-index: 0;}#scroller .item:before { border-radius: 10px; width: 500px; display: block; content: ''; position: absolute; width: 100%; height: 100%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.4);}#scroller .item img { display: block; border-radius: 10px;}#scroller .left { -webkit-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6); -moz-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6); -o-transform: rotateY(25deg) translateX(-320px) skewY(-5deg) scale(0.4, 0.6);}#scroller .middle { z-index: 1; -webkit-transform: rotateY(0deg) translateX(0) scale(1); -moz-transform: rotateY(0deg) translateX(0) scale(1); -o-transform: rotateY(0deg) translateX(0) scale(1);}#scroller .right { -webkit-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6); -moz-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6); -o-transform: rotateY(-25deg) translateX(320px) skewY(5deg) scale(0.4, 0.6);}#scroller .left-hidden { opacity: 0; z-index: -1; -webkit-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5); -moz-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5); -o-transform: rotateY(25deg) translateX(-430px) skewY(-5deg) scale(0.3, 0.5);}#scroller .right-hidden { opacity: 0; z-index: -1; -webkit-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5); -moz-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5); -o-transform: rotateY(-25deg) translateX(430px) skewY(5deg) scale(0.3, 0.5);}.nav { position: absolute; width: 500px; height: 30px; margin: 170px 0 0; z-index: 2; display: none;}.prev,.next { position: absolute; display: block; height: 30px; width: 30px; background-color: rgba(0, 0, 0, 0.85); border-radius: 15px; color: #E4E4E4; bottom: 15px; left: 15px; text-align: center; line-height: 26px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.7);}.next { left: inherit; right: 15px;}.prev:hover,.next:hover { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.7);}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="scroller"> <div > <a >«</a> <a >»</a> </div> <a href="#"> <img src="http://i.imgur.com/5Mk3EfW.jpg" /> </a> <a href="#"> <img src="http://i.imgur.com/79aU67L.jpg" /> </a> <a href="#"> <img src="http://i.imgur.com/x3wSoFU.jpg" /> </a> <a href="#"> <img src="http://i.imgur.com/27fTqbA.jpg" /> </a> <a href="#"> <img src="http://i.imgur.com/RjdFV6n.jpg" /> </a> <a href="#"> <img src="http://i.imgur.com/6W8JOza.jpg" /> </a> <a href="#"> <img src="http://i.imgur.com/rwLY1JH.jpg" /> </a></div>快速样本3
$(function(){ $('figure').on('click', function(){ var nx = $(this).next().data('number') -1; if(nx<0){nx =0;} var delta = -360 /9 * nx; $(this).parent().css("transform", "translateZ( -288px ) rotateY(" + delta + "deg )"); });}).container { width: 210px; height: 140px; position: relative; perspective: 1000px; margin: 50px auto; border: 1px solid #bbb;}#carousel { width: 100%; height: 100%; position: absolute; transform-style: preserve-3d; transform: translateZ(-288px); transition: all 1s ease-in;}figure{margin: 0;}#carousel figure { display: block; position: absolute; width: 186px; height: 116px; left: 10px; top: 10px; border: 2px solid black;}#carousel figure:nth-child(1) { transform: rotateY( 0deg ) translateZ( 288px ); }#carousel figure:nth-child(2) { transform: rotateY( 40deg ) translateZ( 288px ); }#carousel figure:nth-child(3) { transform: rotateY( 80deg ) translateZ( 288px ); }#carousel figure:nth-child(4) { transform: rotateY( 120deg ) translateZ( 288px ); }#carousel figure:nth-child(5) { transform: rotateY( 160deg ) translateZ( 288px ); }#carousel figure:nth-child(6) { transform: rotateY( 200deg ) translateZ( 288px ); }#carousel figure:nth-child(7) { transform: rotateY( 240deg ) translateZ( 288px ); }#carousel figure:nth-child(8) { transform: rotateY( 280deg ) translateZ( 288px ); }#carousel figure:nth-child(9) { transform: rotateY( 320deg ) translateZ( 288px ); }.active{ transform: translateZ( -288px ) rotateY( -160deg );}@keyframes spin { from { transform: rotateY(0); } to { transform: rotateY(360deg); }}#carousel { animation: spin 10s infinite linear;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><section > <div id="carousel"> <figure data-number="1">1</figure> <figure data-number="2">2</figure> <figure data-number="3">3</figure> <figure data-number="4">4</figure> <figure data-number="5">5</figure> <figure data-number="6">6</figure> <figure data-number="7">7</figure> <figure data-number="8">8</figure> <figure data-number="9">9</figure> </div></section>快速样本4：最佳IMO
body > div { width: 500px; margin: 50px auto; text-align: center; } figure { margin: 0; } .container { width: 500px; height: 300px; text-align: left; margin: 60px auto; -webkit-perspective: 1000px; -webkit-perspective-origin: 50% -25%; } .carousel { -webkit-transform-style: preserve-3d; -webkit-transform: translateZ(-540px); position: relative; margin: 0; width: 500px; height: 300px; -webkit-transition: 1s; } .carousel img { position: absolute; border: 15px solid rgba(0, 0, 0, .8); opacity: .5; -webkit-transition: 1s; width: 500px; height: 300px; background:#ccc; } .carousel img:nth-child(1) { -webkit-transform: translateZ(540px) scale(.8); } .carousel img:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(.8); } .carousel img:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(.8); } .carousel img:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(.8); } .carousel img:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(.8); } .carousel img:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(.8); } .carousel img:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(.8); } .carousel img:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(.8); } label { cursor: pointer; background: #eee; display: inline-block; border-radius: 50%; width: 30px; padding-top: 7px; height: 23px; font: .9em Arial; } label:hover { background: #ddd; } input { position: absolute; left: -9999px; } input:checked + label { font-weight: bold; background: #ddd; } input[value="1"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px); } input[value="2"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-45deg); } input[value="3"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-90deg); } input[value="4"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-135deg); } input[value="5"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-180deg); } input[value="6"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-225deg); } input[value="7"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-270deg); } input[value="8"]:checked ~ .container .carousel { -webkit-transform: translateZ(-540px) rotateY(-315deg); } input[value="1"]:checked ~ .container .carousel img:nth-child(1) { -webkit-transform: translateZ(540px) scale(1); opacity: 1; } input[value="2"]:checked ~ .container .carousel img:nth-child(2) { -webkit-transform: rotateY(45deg) translateZ(540px) scale(1); opacity: 1; } input[value="3"]:checked ~ .container .carousel img:nth-child(3) { -webkit-transform: rotateY(90deg) translateZ(540px) scale(1); opacity: 1; } input[value="4"]:checked ~ .container .carousel img:nth-child(4) { -webkit-transform: rotateY(135deg) translateZ(540px) scale(1); opacity: 1; } input[value="5"]:checked ~ .container .carousel img:nth-child(5) { -webkit-transform: rotateY(180deg) translateZ(540px) scale(1); opacity: 1; } input[value="6"]:checked ~ .container .carousel img:nth-child(6) { -webkit-transform: rotateY(225deg) translateZ(540px) scale(1); opacity: 1; } input[value="7"]:checked ~ .container .carousel img:nth-child(7) { -webkit-transform: rotateY(270deg) translateZ(540px) scale(1); opacity: 1; } input[value="8"]:checked ~ .container .carousel img:nth-child(8) { -webkit-transform: rotateY(315deg) translateZ(540px) scale(1); opacity: 1; }<body> <div> <input checked id="one" name="multiples" type="radio" value="1"> <label for="one">1</label> <input id="two" name="multiples" type="radio" value="2"> <label for="two">2</label> <input id="three" name="multiples" type="radio" value="3"> <label for="three">3</label> <input id="four" name="multiples" type="radio" value="4"> <label for="four">4</label> <input id="five" name="multiples" type="radio" value="5"> <label for="five">5</label> <input id="six" name="multiples" type="radio" value="6"> <label for="six">6</label> <input id="seven" name="multiples" type="radio" value="7"> <label for="seven">7</label> <input id="eight" name="multiples" type="radio" value="8"> <label for="eight">8</label> <div > <div > <img src="images/1.jpg" alt="Landscape 1"> <img src="images/2.jpg" alt="Landscape 2"> <img src="images/3.jpg" alt="Landscape 3"> <img src="images/4.jpg" alt="Landscape 4"> <img src="images/5.jpg" alt="Landscape 5"> <img src="images/6.jpg" alt="Landscape 6"> <img src="images/7.jpg" alt="Landscape 7"> <img src="images/8.jpg" alt="Landscape 8"> </div> </div> </div></body>快速样本5
用途SCSS
〜源
快速样本6
var mypre = function(){ //define variables var myPad = scrawl.pad.mycanvas, here, details = false, myPic, myPicPath, mySprite, mySpeed = 0, items = [ 'angelfish', 'blackbutterfly', 'cagedparrot', 'capuchin', 'greenparrot', 'ibis', 'kookaburra', 'peacock', 'pelican', 'pinkcockatoo', 'swallowtail', 'swan', 'tabbycats', 'terrapin', 'turkey' ], myGroup, myReflections, carousel, selectImage, unselectImage, checkClick, updateCarousel; //set background color for canvas scrawl.cell[myPad.base].set({ backgroundColor: 'black', }); //import images into scrawl library scrawl.getImagesByClass('demo'); //define groups myGroup = scrawl.newGroup({ name: 'myGroup', order: 2, }); myReflections = scrawl.newGroup({ name: 'myReflections', order: 1, }); //define sprites - carousel carousel = scrawl.makeEllipse({ name: 'carousel', startX: 375, startY: 200, radiusX: 300, radiusY: 100, method: 'none', }); //define sprites - display photos for(var i = 0, z = items.length; i < z; i++){ scrawl.newPicture({ name: items[i], group: 'myGroup', source: items[i], width: 150, height: 100, strokeStyle: 'Gold', lineJoin:'round', method: 'fillDraw', path: 'carousel', pathPlace: i/z, pathSpeedConstant: false, handleX: 'center', handleY: '101%', }).clone({ //and their reflections name: items[i]+'_r', group: 'myReflections', globalAlpha: 0.32, flipUpend: true, }); } //event listener and associated functions selectImage = function(){ myPic = myGroup.getSpriteAt(here); if(myPic){ myPicPath = myPic.path; details = true; myPic.set({ startX: 375, startY: 187.5, path: false, scale: 3.7, order: 1000, handleY: 'center', }); scrawl.sprite[myPic.name+'_r'].set({ visibility: false, }); scrawl.render(); } }; unselectImage = function(){ if(myPic){ myPic.set({ handleY: '101%', path: myPicPath, }); scrawl.sprite[myPic.name+'_r'].set({ visibility: true, }); } details = false; myPic = false; myPicPath = false; }; checkClick = function(e){ if(e){ e.stopPropagation(); e.preventDefault(); } (details) ? unselectImage() : selectImage(); }; scrawl.canvas.mycanvas.addEventListener('mouseup', checkClick, false); //animation function updateCarousel = function(){ if(!details){ mySpeed = -((here.x - 375)/170000); for(var i = 0, z = items.length; i < z; i++){ mySprite = scrawl.sprite[items[i]]; mySprite.set({ scale: (mySprite.start.y/250)+0.5, order: mySprite.start.y, deltaPathPlace: mySpeed, }); mySprite = scrawl.sprite[items[i]+'_r']; mySprite.set({ scale: (mySprite.start.y/250)+0.5, order: mySprite.start.y, deltaPathPlace: mySpeed, }); } myGroup.updateStart(); myReflections.updateStart(); } myReflections.sortSprites(); myGroup.sortSprites(); myPad.stampBackground(); for(var i = 0, z = items.length; i < z; i++){ scrawl.sprite[myReflections.sprites[i]].stamp('clearWithBackground'); scrawl.sprite[myReflections.sprites[i]].stamp(); scrawl.sprite[myGroup.sprites[i]].stamp(); } myPad.show(); }; //initial display of carousel - for safari here = {x: 350, y: 187.5, active: true}; updateCarousel(); updateCarousel(); //animation object scrawl.newAnimation({ fn: function(){ here = myPad.getMouse(); if(here.active){ updateCarousel(); } }, }); };scrawl.loadModules({ path: 'http://scrawl.rikweb.org.uk/js/', modules: ['images', 'animation', 'path', 'factories'], callback: function(){ window.onload = function(){ scrawl.init(); mypre(); }; }, });img { position: fixed; visibility: hidden; }<h2>3D Carousel effect with selectable items</h2><p>Move mouse over canvas to rotate the carousel. Click on an image to enlarge it, or to return to the carousel.</p><canvas id="mycanvas" width="750" height="375"></canvas><img src="http://scrawl.rikweb.org.uk/img/carousel/angelfish.png" id="angelfish" /><img src="http://scrawl.rikweb.org.uk/img/carousel/blackbutterfly.png" id="blackbutterfly" /><img src="http://scrawl.rikweb.org.uk/img/carousel/cagedparrot.png" id="cagedparrot" /><img src="http://scrawl.rikweb.org.uk/img/carousel/capuchin.png" id="capuchin" /><img src="http://scrawl.rikweb.org.uk/img/carousel/greenparrot.png" id="greenparrot" /><img src="http://scrawl.rikweb.org.uk/img/carousel/ibis.png" id="ibis" /><img src="http://scrawl.rikweb.org.uk/img/carousel/kookaburra.png" id="kookaburra" /><img src="http://scrawl.rikweb.org.uk/img/carousel/peacock.png" id="peacock" /><img src="http://scrawl.rikweb.org.uk/img/carousel/pelican.png" id="pelican" /><img src="http://scrawl.rikweb.org.uk/img/carousel/pinkcockatoo.png" id="pinkcockatoo" /><img src="http://scrawl.rikweb.org.uk/img/carousel/swallowtail.png" id="swallowtail" /><img src="http://scrawl.rikweb.org.uk/img/carousel/swan.png" id="swan" /><img src="http://scrawl.rikweb.org.uk/img/carousel/tabbycats.png" id="tabbycats" /><img src="http://scrawl.rikweb.org.uk/img/carousel/terrapin.png" id="terrapin" /><img src="http://scrawl.rikweb.org.uk/img/carousel/turkey.png" id="turkey" /><script src="http://scrawl.rikweb.org.uk/js/scrawlCore-min.js"></script>欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）