熊猫TV美女轮播图效果

时间：6年前阅读：5103
<!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,我们将及时处理。
微信扫码关注
更新实时通知
熊猫TV美女轮播图效果

网友评论
