旋转木马轮播图特效共有五张图片,每张图片排列的位置是以中间为对称的。实现了想要的轮播效果,可用在网页制作中重要的展示,先来看看效果:
一部分关键的代码如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<title>图片轮转</title>
<link href="images/reset_zl_2021519.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 导航 -->
<!-- 导航 end -->
<div class="contents">
<!--图片轮转-->
<div class="poster_box">
<div class = "caroursel poster-main" data-setting = '{
"width":1060,
"height":300,
"posterWidth":543,
"posterHeight":297,
"scale":0.85,
"speed": 500,
"autoPlay":true,
"delay":2000,
"verticalAlign":"middle"
}'>
<div class="poster-btn poster-prev-btn"></div>
<ul class="poster-list">
<li class="poster-item">
<div class="item"> <a href="#"><img class="tabImg" src="images/t1.png"></a> <span class="poster-item-title">图片轮转标题1</span> </div>
</li>
<li class="poster-item">
<div class="item"> <a href="#"><img class="tabImg" src="images/t2.png"></a> <span class="poster-item-title">图片轮转标题2</span> </div>
</li>
<li class="poster-item">
<div class="item"> <a href="#"><img class="tabImg" src="images/t3.png"></a> <span class="poster-item-title">图片轮转标题3</span> </div>
</li>
<li class="poster-item">
<div class="item"> <a href="#"><img class="tabImg" src="images/t4.png"></a> <span class="poster-item-title">图片轮转标题4</span> </div>
</li>
<li class="poster-item">
<div class="item"> <a href="#"><img class="tabImg" src="images/t5.png"></a> <span class="poster-item-title">图片轮转标题5</span> </div>
</li>
</ul>
<ul class="lunbo_btn">
<li class="tabBtn"></li>
<li class="tabBtn"></li>
<li class="tabBtn"></li>
<li class="tabBtn"></li>
<li class="tabBtn"></li>
</ul>
<div class="poster-btn poster-next-btn"></div>
</div>
<!--pc 图片轮转 end-->
</div>
</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="images/jquery.carousel-zl-fb.js"></script><!-- 首页切换 -->
<script>
Caroursel.init($('.caroursel'))
</script>
</body>
</html>
全部代码:旋转木马轮播图特效