实现原理：父元素为定宽定高相对定位，且overflow：hidden，子元素为绝对定位高度继承父元素，宽度可计算或设置一个大值，通过绝对定位的left来决定显示的子元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Carousel</title> <link rel="stylesheet" href="../css/reset.css"> </head> <style> .carousel-wrap { position: relative; width: 600px; height: 80px; margin: 40px auto; } .carousel-wrap .current { position: absolute; left: 0; top: -5px; width: 112px; height: 85px; background: url("../images/carousel-cur.png") no-repeat center center; cursor: pointer; z-index: 103; } .carousel-container { position: relative; width: 600px; height: 80px; text-align: center; overflow: hidden; } .carousel-container .carousel-list { position: absolute; width: 800px; height: 80px; left: 0; } .carousel-container .carousel-list li { position: relative; float: left; cursor: pointer; width: 112px; height: 80px; margin-right: 10px; overflow: hidden; } .carousel-container .carousel-list li em { position: absolute; bottom: 0; left: 0; width: 112px; height: 26px; background-color: #000; opacity: 0.6; z-index: 102; } .carousel-container .carousel-list li p { position: absolute; bottom: 0; width: 112px; height: 26px; line-height: 26px; text-align: center; z-index: 103; } .carousel-container .carousel-list li p a { color: #fff; font-size: 12px; } .carousel-container .carousel-list li img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; height: 80px; z-index: 100; } .carousel-container .carousel-list li img:hover { transform: scale(1.05); transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; } .carousel-container .arrow { position: absolute; width: 22px; height: 33px; z-index: 104; background: url("../images/arrow.png"); } .carousel-container .arrow.next { background-position: -23px 0; top: 20px; right: 0; } .carousel-container .arrow.previous { background-position: 0 0; top: 20px; left: 0; } .carousel-container .current { position: absolute; left: 0; width: 114px; height: 84px; border: 2px solid #ddd; } </style> <body> <div class="carousel-wrap"> <div class="current" id="carouselCurrent"></div> <div class="carousel-container"> <ul class="carousel-list" id="carouselList"> <li> <p><a href="javascript:;">样板间1</a></p> <em></em> <img src="../images/112x80_1.png" alt=""> </li> <li> <p><a href="javascript:;">全景看房2</a></p> <em></em> <img src="../images/112x80_2.jpg" alt=""> </li> <li> <p><a href="javascript:;">活动现场3</a></p> <em></em> <img src="../images/112x80_3.png" alt=""> </li> <li> <p><a href="javascript:;">证件照4</a></p> <em></em> <img src="../images/112x80_4.jpg" alt=""> </li> <li> <p><a href="javascript:;">户型5</a></p> <em></em> <img src="../images/112x80_5.jpg" alt=""> </li> <li> <p><a href="javascript:;">交通图6</a></p> <em></em> <img src="../images/112x80_6.jpg" alt=""> </li> <li> <p><a href="javascript:;">实景图7</a></p> <em></em> <img src="../images/112x80_7.jpg" alt=""> </li> <li> <p><a href="javascript:;">视频8</a></p> <em></em> <img src="../images/112x80_8.png" alt=""> </li> <li> <p><a href="javascript:;">证件9</a></p> <em></em> <img src="../images/112x80_9.jpg" alt=""> </li> <li> <p><a href="javascript:;">证件10</a></p> <em></em> <img src="../images/112x80_9.jpg" alt=""> </li> </ul> <a href="javascript:;" class="arrow previous" id="arrowPrev"></a> <a href="javascript:;" class="arrow next" id="arrowNext"></a> </div> </div> </body> <script src="../JavaScript/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function () { let arrowPrev = $('#arrowPrev'); let arrowNext = $('#arrowNext'); let carouselList = $('#carouselList'); let carouselCurrent = $('#carouselCurrent'); let listLength = $('#carouselList li').length; //轮播总数 let showLength = 5; let stepWidth = 122; let fixCurPonit = (showLength - 1) * stepWidth; //488 let pointCurWidth = stepWidth - (listLength - showLength) * stepWidth; let pointPicWidth = (showLength - listLength) * stepWidth; carouselList.css('width', (listLength + 1) * 112 + 'px') arrowPrev.click(function () { move(stepWidth); }); arrowNext.click(function () { move(-stepWidth); }); function move(offset) { let picLeft = parseFloat(carouselList.css('left')); let curLeft = parseFloat(carouselCurrent.css('left')); if (picLeft < pointCurWidth && curLeft < fixCurPonit) { let newCurLeft = curLeft - offset; //carouselCurrent.css('left', `${newCurLeft}px`); carouselCurrent.animate({ left: `${newCurLeft}px` }, 300); } else if (picLeft === pointPicWidth && curLeft === fixCurPonit) { carouselCurrent.css('left', '0'); carouselList.css('left', '0'); } else { let newPicLeft = picLeft + offset; //carouselList.css('left', `${newPicLeft}px`); carouselList.animate({ left: `${newPicLeft}px` }, 300) } } }) </script> </html>