JS特效第160弹：旋转木马轮播图特效_轮播特效

作者：木道寻08 | 2024-07-23 18:01:33

踩

轮播特效

旋转木马轮播图特效共有五张图片，每张图片排列的位置是以中间为对称的。实现了想要的轮播效果，可用在网页制作中重要的展示，先来看看效果：

一部分关键的代码如下：


<!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>

全部代码：旋转木马轮播图特效

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/木道寻08/article/detail/870956?site