<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title Page</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> </head> <style> * { margin: 0; padding: 0; } .demo { position: relative; height: 320px; /*margin-top: 1rem;*/ width: 100% } .demo .item { position: absolute; left: 50%; bottom: 0; -webkit-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); -webkit-transition: all 0.6s; transition: all 0.6s; width: 222px; height: 300px; /*border: 1px solid #ccc;*/ text-align: center; line-height: 300px; z-index: 1; font-size: 74px; color: #fff; } .demo .item_cur { z-index: 3 } .demo .item_0 { -webkit-transform: translate3d(-104%, 12%, 0) scale3d(0.5, 0.5, 1); transform: translate3d(-104%, 12%, 0) scale3d(0.5, 0.5, 1) } .demo .item_1 { -webkit-transform: translate3d(-81%, 9%, 0) scale3d(0.7, 0.7, 1); transform: translate3d(-81%, 9%, 0) scale3d(0.7, 0.7, 1); z-index: 2 } .demo .item_3 { -webkit-transform: translate3d(-20%, 9%, 0) scale3d(0.7, 0.7, 1); transform: translate3d(-20%, 9%, 0) scale3d(0.7, 0.7, 1); z-index: 2 } .demo .item_4 { -webkit-transform: translate3d(4%, 12%, 0) scale3d(0.5, 0.5, 1); transform: translate3d(4%, 12%, 0) scale3d(0.5, 0.5, 1) } .demo_btn { text-align: center; } </style> <body> <div class="demo"> <div class="item item_0">1</div> <div class="item item_1">2</div> <div class="item item_cur">3</div> <div class="item item_3">4</div> <div class="item item_4">5</div> </div> <div class="demo_btn"> <a href="javascript:;" class="left" title="向左移动"><<</a> <a href="javascript:;" class="right" title="向右移动">>></a> <p>（PC下可点击按钮切换，移动端可左右滑动切换）</p> </div> </body> <script> (function () { var getRandomColor = function () { return '#' + Math.floor(Math.random() * 16777215).toString(16); } var egg_change = function (type) { var $demo = $('.demo'), index = parseInt($demo.attr('index_cur') || 2), $item = $('.demo .item'), len = $item.length; if (type == 'left') { index = (index + 1) % len; } else { index = (index - 1 + len) % len; } $demo.attr('index_cur', index); $item.removeClass('item_0 item_1 item_3 item_4 item_cur'); $item.eq((index - 2 + len) % len).addClass('item_0'); $item.eq((index - 1 + len) % len).addClass('item_1'); $item.eq(index).addClass('item_cur'); $item.eq((index + 1) % len).addClass('item_3'); $item.eq((index + 2) % len).addClass('item_4'); } $('.item').each(function () { $(this).css('background-color', getRandomColor()); }) $('.demo').on('swipeLeft', function () { egg_change('left'); }).on('swipeRight', function () { egg_change('right'); }); $('.demo_btn').on('click', '.left', function () { egg_change('left'); }).on('click', '.right', function () { egg_change('right'); }) })(); </script> </html>