基于jQuery实现自动轮播旋转木马特效


Posted in Javascript onNovember 02, 2015

本文实例讲述了jQuery实现自动轮播旋转木马特效。分享给大家供大家参考。具体如下:
这是一款基于jQuery实现自动轮播旋转木马特效代码,实现过程很简单。
运行效果图:           -------------------查看效果 下载源码-------------------

基于jQuery实现自动轮播旋转木马特效

简要教程
jquery.caroursel.js是一款非常实用的可自动轮播的jQuery旋转木马插件。该旋转木马将图片进行堆叠,轮流的将图片推送到最前面来展示,形成旋转木马的效果。
 使用方法
该jQuery旋转木马插件需要引入jQuery,jquery.carousel.js文件。

<script src="js/jquery.min.js"></script>
<script src="js/jquery.carousel.js"></script>

HTML结构

该jQuery旋转木马插件使用一个<div>来作为包裹元素,在它里面是一个无序列表,用于放置图片,以及两个作为前后导航按钮的<div>元素。

<div class="caroursel rotator-demo">
 <ul class="rotator-list">
 <li class="rotator-item"><img src="image/1.jpg"></li>
 <li class="rotator-item"><img src="image/2.jpg"></li>
 <li class="rotator-item"><img src="image/3.jpg"></li>
 </ul>
 <div class="rotator-btn rotator-prev-btn"></div>
 <div class="rotator-btn rotator-next-btn"></div>
</div>

图片的数量需要为奇数张,否则显示会有一些异常,这是该插件的一个小bug。
CSS样式

你需要为该旋转木马特效添加下面的一些必要的CSS样式。

.rotator-main {
 position: relative;
 width: 900px;
 height: 400px
}
 
.rotator-main a, .rotator-main img { display: block; }
 
.rotator-main .rotator-list {
 width: 900px;
 height: 400px
}
 
.rotator-main .rotator-list .rotator-item {
 position: absolute;
 left: 0px;
 top: 0px
}
 
.rotator-main .rotator-btn {
 position: absolute;
 height: 100%;
 width: 100px;
 top: 0px;
 z-index: 10;
 opacity: 0;
}
 
.rotator-main .rotator-prev-btn {
 left: 0px;
 background: url("../image/btn_l.png") no-repeat center center;
 background-color: red
}
 
.rotator-main .rotator-next-btn {
 right: 0px;
 background: url("../image/btn_r.png") no-repeat center center;
 background-color: red
}

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该旋转木马插件。
Caroursel.init($('.caroursel'))               
如果你需要自定义一些参数,可以在顶层<div>元素中设置data-setting属性。

<div class="caroursel rotator-main"
  data-setting = '{
  "width":1000,   //旋转木马的宽度
  "height":270,   //旋转木马的高度
  "posterWidth":640, //当前显示的图片的宽度
  "posterHeight":270, //当前显示的图片的高度
  "scale":0.8,   //缩放值
  "algin":"middle",  //对齐方式
  "speed":"1000",  //动画速度
  "isAutoplay":"true", //自动播放
  "dealy":"1000"  //延迟时间
}'>

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery实现自动轮播旋转木马特效代码如下

<html lang="zh">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>jQuery自动轮播旋转木马插件</title>
 <link rel="stylesheet" type="text/css" href="css/normalize.css" />
 <link rel="stylesheet" type="text/css" href="css/default.css">
 <link type="text/css" rel="stylesheet" href="css/carousel.css">
 <style type="text/css">
 .caroursel{margin:150px auto;}
 </style>
 <!--[if IE]>
 <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
 <![endif]-->
</head>
<body>
 <article class="htmleaf-container">
 <header class="htmleaf-header">
 <h1>jQuery自动轮播旋转木马插件</h1>
 
 </header>
 <div class = "caroursel poster-main" data-setting = '{
  "width":1000,
  "height":270,
  "posterWidth":640,
  "posterHeight":270,
  "scale":0.8,
  "dealy":"2000",
  "algin":"middle"
 }'>
  <ul class = "poster-list">
  <li class = "poster-item"><img src="image/1.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/2.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/3.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/4.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/5.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/6.jpg" width = "100%" height="100%"></li>
  <li class = "poster-item"><img src="image/1.jpg" width = "100%" height="100%"></li>
  </ul>
  <div class = "poster-btn poster-prev-btn"></div>
  <div class = "poster-btn poster-next-btn"></div>
 </div>
 
 </article>
 
 <script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
 <script src="js/jquery.carousel.js"></script>
 <script>
 Caroursel.init($('.caroursel'))
 </script>
</body>
</html>

为大家分享的jQuery实现自动轮播旋转木马特效代码,希望大家可以喜欢,并应用到实践中。

Javascript 相关文章推荐
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
浅析jQuery中常用的元素查找方法总结
Jul 04 Javascript
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
jquery如何把数组变为字符串传到服务端并处理
Apr 30 Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
Jun 09 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
基于Vue如何封装分页组件
Dec 16 Javascript
Vue组件实例间的直接访问实现代码
Aug 20 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
JavaScript中的回调函数实例讲解
Jan 27 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 #Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 #Javascript
JS实现超简单的鼠标拖动效果
Nov 02 #Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 #Javascript
JS实现在状态栏显示打字效果完整实例
Nov 02 #Javascript
12个超实用的JQuery代码片段
Nov 02 #Javascript
JavaScript Length 属性的总结
Nov 02 #Javascript
You might like
如何做到多笔资料的同步
2006/10/09 PHP
global.php
2006/12/09 PHP
PHP可逆加密/解密函数分享
2012/09/25 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号
2015/09/30 PHP
php自定义时间转换函数示例
2016/12/07 PHP
thinkPHP简单调用函数与类库的方法
2017/03/15 PHP
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
js中巧用cssText属性批量操作样式
2011/03/13 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
JavaScript一元正号运算符示例代码
2019/06/30 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
python递归查询菜单并转换成json实例
2017/03/27 Python
PyQt5实现拖放功能
2018/04/25 Python
Python绘制的二项分布概率图示例
2018/08/22 Python
Python时间序列缺失值的处理方法(日期缺失填充)
2019/08/11 Python
Python + opencv对拍照得到的图片进行背景去除的实现方法
2020/11/18 Python
Python爬取梨视频的示例
2021/01/29 Python
html5 touch事件实现触屏页面上下滑动(一)
2016/03/10 HTML / CSS
前端实现背景虚化但内容清晰且自适应 的实例代码
2019/08/01 HTML / CSS
AC Lens:购买隐形眼镜
2017/02/26 全球购物
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
入学申请自荐信范文
2014/02/26 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
教师对学生的寄语
2014/04/03 职场文书
保护环境倡议书500字
2014/05/19 职场文书
病危通知书样本
2015/04/17 职场文书
2016年教育局“我们的节日——端午节”主题活动总结
2016/04/01 职场文书