<!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> .box-content { width: 600px; margin: 40px auto; } .carousel-show { margin-bottom: 20px; } .carousel-show .item-list, .carousel-show .item-list .banner-position { position: relative; width: 600px; height: 400px; overflow: hidden; } .carousel-show .item-list li { display: none; position: absolute; top: 0; left: 0; width: 600px; height: 400px; background-color: #ddd; } .carousel-show .item-list img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 400px; margin: auto; } .carousel-wrap { position: relative; width: 600px; height: 80px; } .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.next:hover { background-position: -23px -34px; } .carousel-container .arrow.previous { background-position: 0 0; top: 20px; left: 0; } .carousel-container .arrow.previous:hover { background-position: 0 -34px; } .carousel-container .current { position: absolute; left: 0; width: 114px; height: 84px; border: 2px solid #ddd; } </style> <body> <div class="box-content"> <div class="carousel-show"> <ul class="item-list" id="carouselShowList"> <li> <div class="banner-position"> <a href="javascript:;"> <img src="../images/1400x933_1.jpg" alt=""> </a> </div> </li> <li> <div class="banner-position"> <a href="javascript:;"> <img src="../images/1400x933_2.png" alt=""> </a> </div> </li> <li> <div class="banner-position"> <a href="javascript:;"> <img src="../images/1400x933_3.jpg" alt=""> </a> </div> </li> <li> <div class="banner-position"> <a href="javascript:;"> <img src="../images/1400x933_4.png" alt=""> </a> </div> </li> <li> <div class="banner-position"> <a href="javascript:;"> <img src="../images/1400x933_5.jpg" alt=""> </a> </div> </li> <li> <div class="banner-position"> <a href="javascript:;"> <img src="../images/1400x933_6.jpg" alt=""> </a> </div> </li> <li> <div class="banner-position"> <a href="javascript:;"> <img src="../images/1400x933_7.jpg" alt=""> </a> </div> </li> <li> <div class="banner-position"> <a href="javascript:;"> <img src="../images/1400x933_8.jpg" alt=""> </a> </div> </li> <li> <div class="banner-position"> <a href="javascript:;"> <img src="../images/1400x933_9.png" alt=""> </a> </div> </li> </ul> </div> <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.jpg" alt=""> </li> <li> <p><a href="javascript:;">图2</a></p> <em></em> <img src="../images/112x80_2.png" alt=""> </li> <li> <p><a href="javascript:;">图3</a></p> <em></em> <img src="../images/112x80_3.jpg" alt=""> </li> <li> <p><a href="javascript:;">图4</a></p> <em></em> <img src="../images/112x80_4.png" 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.jpg" alt=""> </li> <li> <p><a href="javascript:;">图9</a></p> <em></em> <img src="../images/112x80_9.png" alt=""> </li> </ul> <a href="javascript:;" class="arrow previous" id="arrowPrev"></a> <a href="javascript:;" class="arrow next" id="arrowNext"></a> </div> </div> </div> </body> <script src="../JavaScript/jquery.min.js" type="text/javascript"></script> <script> $(document).ready(function () { let index = 0; let isMoveOver = true; let arrowPrev = $('#arrowPrev'); let arrowNext = $('#arrowNext'); let carouselList = $('#carouselList'); let carouselCurrent = $('#carouselCurrent'); let carouselListItems = $('#carouselList li'); let listLength = carouselListItems.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'); showCurrentCarousel(index); function showCurrentCarousel(index) { $('#carouselShowList li').css({ display: 'none' }); $('#carouselShowList li').eq(index).css({ display: 'block' }); } carouselListItems.each(function (index) { $(this).click(function () { let newLeft = parseInt($(this).offset().left) - stepWidth; carouselCurrent.css('left', newLeft); showCurrentCarousel(index); }) }) arrowPrev.click(function () { if (isMoveOver) { movePrev(); } }); arrowNext.click(function () { if (isMoveOver) { moveNext(); } }); function resetMoveOver() { isMoveOver = true; } function movePrev() { isMoveOver = false; let picLeft = parseFloat(carouselList.css('left')); let curLeft = parseFloat(carouselCurrent.css('left')); if (curLeft > 0 && curLeft <= fixCurPonit) { index--; let newCurLeft = curLeft - stepWidth; //carouselCurrent.css('left', `${newCurLeft}px`); carouselCurrent.animate({ left: `${newCurLeft}px` }, 300, resetMoveOver); } else if (picLeft === 0 && curLeft === 0) { index = listLength - 1; carouselCurrent.css('left', `${fixCurPonit}px`); carouselList.css('left', `${pointPicWidth}px`); isMoveOver = true; } else { index--; let newPicLeft = picLeft + stepWidth; //carouselList.css('left', `${newPicLeft}px`); carouselList.animate({ left: `${newPicLeft}px` }, 300, resetMoveOver) } showCurrentCarousel(index); } function moveNext() { isMoveOver = false; let picLeft = parseFloat(carouselList.css('left')); let curLeft = parseFloat(carouselCurrent.css('left')); if (picLeft < pointCurWidth && curLeft < fixCurPonit) { index++; let newCurLeft = curLeft + stepWidth; //carouselCurrent.css('left', `${newCurLeft}px`); carouselCurrent.animate({ left: `${newCurLeft}px` }, 300, resetMoveOver); } else if (picLeft === pointPicWidth && curLeft === fixCurPonit) { index = 0; carouselCurrent.css('left', '0'); carouselList.css('left', '0'); isMoveOver = true; } else { index++; let newPicLeft = picLeft - stepWidth; //carouselList.css('left', `${newPicLeft}px`); carouselList.animate({ left: `${newPicLeft}px` }, 300, resetMoveOver) } showCurrentCarousel(index); } }) </script> </html>