熊猫TV美女轮播图效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../uu/swiper-4.4.1.min.css"> <style type="text/css"> .swiper-container { width: 980px; height: 240px; border: 1px solid blue; /*margin: 100px auto;*/ overflow: visible; /*把溢出隐藏取消掉*/ position: relative; } #padna{ width: 100%; height: 240px; overflow: hidden; margin: 100px auto; } .coverleft{ position: absolute; top: 0; left: -2000px; /*覆盖左边*/ width: 2000px; height: 240px; background: black; opacity: 0.6; z-index: 10; } .coverright{ position: absolute; top: 0; left: 980px; /*覆盖右边*/ width: 2000px; height: 240px; background: black; opacity: 0.6; z-index: 10; } </style> </head> <body> <div id="padna"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background: darkblue;"></div> <div class="swiper-slide" style="background: darkcyan;"></div> <div class="swiper-slide" style="background: darkgoldenrod;"></div> <div class="swiper-slide" style="background: darkgray;"></div> <div class="swiper-slide" style="background: darkgreen;"></div> <div class="swiper-slide" style="background: darkkhaki;"></div> <div class="swiper-slide" style="background: darkmagenta;"></div> <div class="swiper-slide" style="background: darkolivegreen;"></div> <div class="swiper-slide"style="background: darkorange;"></div> <div class="swiper-slide" style="background: teal;"></div> <div class="swiper-slide" style="background: thistle;"></div> <div class="swiper-slide" style="background: tomato;"></div> </div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> <!--左右覆盖层--> <div class="coverleft"></div> <div class="coverright"></div> </div> </div> <script src="../uu/swiper-4.4.1.min.js"></script> <script> var mySwiper = new Swiper ('.swiper-container', { direction: 'horizontal', // 垂直切换选项 loop: true, // 循环模式选项 loopAdditionalSlides : 4, //复印前面的4块到后面：不让后面(右边滑动)留空白 slidesPerView : 4, slidesPerGroup : 4, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }) </script> </body> </html> 代码效果点上面的（运行代码）看
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知