一款JS旋转木马特效,类似与旋转木马的层叠效果,最前面的一张为大图显示,后面的图片依次堆叠前面图片的后面,通过左右箭头的按钮来控制图片的旋转切换。
页面的head部分,需引入页面的样式文件和轮播的JS插件,代码如下:
<link type="text/css" rel="stylesheet" href="css/css.css"/>
<script type="text/javascript" src="js/animate.js"></script>
<script type="text/javascript" src="js/carousel.js"></script>
页面的body部分,需在div容器里设置好ul无序列表来显示轮播图片,代码如下:
<div class="wrap" id="wrap">
<div class="slide" id="slide">
<ul>
<li><a href="#"><img src="images/slidepic1.png" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic2.png" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic3.png" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic4.png" alt=""/></a></li>
<li><a href="#"><img src="images/slidepic5.png" alt=""/></a></li>
</ul>
<div class="arrow" id="arrow">
<a href="javascript:;" class="prev" id="arrLeft"></a>
<a href="javascript:;" class="next" id="arrRight"></a>
</div>
</div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791