基于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 相关文章推荐
ExtJS Grid使用SimpleStore、多选框的方法
Nov 20 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
javascript中的变量作用域以及变量提升详细介绍
Oct 24 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
BootStrapValidator校验方式
Dec 19 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
node 标准输入流和输出流代码实例
Sep 19 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 Javascript
WebPack工具运行原理及入门教程
Dec 02 Javascript
用vue设计一个日历表
Dec 03 Vue.js
详解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
通过对php一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
jQuery实现DIV层收缩展开的方法
2015/02/27 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
2017/03/17 Javascript
BootStrap 页签切换失效的解决方法
2017/08/17 Javascript
详解vue后台系统登录态管理
2019/04/02 Javascript
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
python局部赋值的规则
2013/03/07 Python
pygame实现弹力球及其变速效果
2017/07/03 Python
Python3实现购物车功能
2018/04/18 Python
Python函数中不定长参数的写法
2019/02/13 Python
Django forms表单 select下拉框的传值实例
2019/07/19 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
html5 外链式实现加减乘除的代码
2019/09/04 HTML / CSS
联想加拿大官方网站:Lenovo Canada
2018/04/05 全球购物
一套Java笔试题
2016/08/20 面试题
2015年医药代表工作总结
2015/04/25 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
植树节新闻稿
2015/07/17 职场文书
MySQL sql_mode修改不生效的原因及解决
2021/05/07 MySQL
详解vue中v-for的key唯一性
2021/05/15 Vue.js
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS