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

马coder

于 2024-02-20 17:45:00 发布

阅读量605

点赞数 13

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_38343072/article/details/136064338

版权

本文介绍了一种使用HTML、CSS和jQuery实现的旋转木马轮播图特效，包括关键代码片段，展示了如何在网页制作中创建五张图片的动态展示效果。

摘要由CSDN通过智能技术生成

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

一部分关键的代码如下：

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

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