基于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 相关文章推荐
javascript replace()正则替换实现代码
Feb 26 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
DIV始终居中的js代码
Feb 17 Javascript
Javascript封装DOMContentLoaded事件实例
Jun 12 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
Aug 06 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
layui radio性别单选框赋值方法
Aug 15 Javascript
利用Webpack实现小程序多项目管理的方法
Feb 25 Javascript
手把手教你使用TypeScript开发Node.js应用
May 06 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 Javascript
JavaScript ES 模块的使用
Nov 12 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
雄兵连三大错觉:凯莎没了,凉冰阵亡了,华烨觉得自己又行了
2020/04/09 国漫
php中的动态调用实例分析
2015/01/07 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
php获取微信共享收货地址的方法
2017/12/21 PHP
Django中通过定时任务触发页面静态化的处理方式
2018/08/29 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
2015/11/30 Javascript
谈谈我对JavaScript DOM事件的理解
2015/12/18 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
jQuery中的deferred使用方法
2017/03/27 jQuery
Webpack执行命令参数详解
2017/06/17 Javascript
React数据传递之组件内部通信的方法
2017/12/31 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
python处理csv数据的方法
2015/03/11 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python实现计算文件夹下.h和.cpp文件的总行数
2015/04/23 Python
Python结合ImageMagick实现多张图片合并为一个pdf文件的方法
2018/04/24 Python
python机器学习之神经网络实现
2018/10/13 Python
python使用phoenixdb操作hbase的方法示例
2019/02/28 Python
python pyecharts 实现一个文件绘制多张图
2020/05/13 Python
Python爬虫之Selenium警告框(弹窗)处理
2020/12/04 Python
骆驼官方商城:CAMEL
2016/11/22 全球购物
大学自主招生自荐信
2013/12/16 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
驾驶员培训方案
2014/05/01 职场文书
消防标语大全
2014/06/07 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
财务人员岗位职责
2015/02/03 职场文书
记者节感言
2015/08/03 职场文书