1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

熊猫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/post/7574.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: