一个不错的旋转木马轮播图特效

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

主要代码如下：

<!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="data: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="data: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="data: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="data: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="data: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="data:images/jquery.carousel-zl-fb.js"></script><!-- 首页切换 --> <script>Caroursel.init($('.caroursel'))</script>
</body>
</html>

下载源码

一个不错的旋转木马轮播图特效相关推荐

html5圆形图片轮播,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单在同一个 ...
HTML圆形立体感轮播图,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单在同一个 ...
通过swiper插件制作旋转木马轮播图
实现效果: swiper插件准备我们旋转木马轮播图的效果可以通过swiper插件轻松搞定这种效果是不是和我们要做的很像呀,我们只要把它引入我们的案例就ok了在swiper官网的获取swiper下 ...
电商项目实战第四节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【轮播图特效】
上一节:电商项目实战第三节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[分类导航栏] 文章目录 [考拉海购网站]之[轮播图特效] 第一步,根据页面布局写相应的html标签 index.h ...
利用CSS 3 的动画相关属性制作轮播图特效
本示例给出了只利用CSS3的动画属性制作下图所示的轮播图特效的步骤. Step 1:定义用来展示效果的容器div (1)设置其背景色 (2)让其大小与浏览器的比例合适,并且让其水平.垂直居中: 例如: ...
js实现旋转木马轮播图
整个页面的文件结构如下图所示: html部分代码: <!DOCTYPE html> <html lang="en"> <head><met ...
html3d轮播图片效果,炫酷3D透视轮播图特效
这是一款炫酷js和CSS3 3D透视轮播图特效.该3D轮播图通过CSS3制作图片的3D透视效果,并使用js来使轮播图于用户进行交互,效果非常炫酷. 使用方法在页面中引入style.css和index ...
Android 旋转木马轮播,js实现旋转木马轮播图效果
本文实例为大家分享了js实现旋转木马轮播图的具体代码,供大家参考,具体内容如下整个页面的文件结构如下图所示: html部分代码: 旋转木马轮播图在html部分引入的myStyle.css文件部分代 ...
html百叶窗切换效果,纯CSS3百叶窗式切换轮播图特效
这是一款使用纯CSS3制作的百叶窗式切换轮播图特效.该特效使用背景图片来制作,在轮播图切换时,通过一组div元素来制作百叶窗效果,非常的炫酷. 使用方法 HTML结构该轮播图特效中使用了6张背景图片 ...

一个不错的旋转木马轮播图特效

一个不错的旋转木马轮播图特效相关推荐

最新文章

热门文章