基于jQuery实现自动轮播旋转木马特效_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 class="caroursel rotator-demo"> <ul class="rotator-list"> <li class="rotator-item"><img src="/static/imghw/default1.png" data-src="image/1.jpg" class="lazy" alt="基于jQuery实现自动轮播旋转木马特效_jquery" ></li> <li class="rotator-item"><img src="/static/imghw/default1.png" data-src="image/2.jpg" class="lazy" alt="基于jQuery实现自动轮播旋转木马特效_jquery" ></li> <li class="rotator-item"><img src="/static/imghw/default1.png" data-src="image/3.jpg" class="lazy" alt="基于jQuery实现自动轮播旋转木马特效_jquery" ></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 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 id="jQuery自动轮播旋转木马插件">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="/static/imghw/default1.png" data-src="image/1.jpg" class="lazy" width = "100%" style="max-width:90%" alt="基于jQuery实现自动轮播旋转木马特效_jquery" ></li>
<li class = "poster-item"><img src="/static/imghw/default1.png" data-src="image/2.jpg" class="lazy" width = "100%" style="max-width:90%" alt="基于jQuery实现自动轮播旋转木马特效_jquery" ></li>
<li class = "poster-item"><img src="/static/imghw/default1.png" data-src="image/3.jpg" class="lazy" width = "100%" style="max-width:90%" alt="基于jQuery实现自动轮播旋转木马特效_jquery" ></li>
<li class = "poster-item"><img src="/static/imghw/default1.png" data-src="image/4.jpg" class="lazy" width = "100%" style="max-width:90%" alt="基于jQuery实现自动轮播旋转木马特效_jquery" ></li>
<li class = "poster-item"><img src="/static/imghw/default1.png" data-src="image/5.jpg" class="lazy" width = "100%" style="max-width:90%" alt="基于jQuery实现自动轮播旋转木马特效_jquery" ></li>
<li class = "poster-item"><img src="/static/imghw/default1.png" data-src="image/6.jpg" class="lazy" width = "100%" style="max-width:90%" alt="基于jQuery实现自动轮播旋转木马特效_jquery" ></li>
<li class = "poster-item"><img src="/static/imghw/default1.png" data-src="image/1.jpg" class="lazy" width = "100%" style="max-width:90%" alt="基于jQuery实现自动轮播旋转木马特效_jquery" ></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实现自动轮播旋转木马特效代码，希望大家可以喜欢，并应用到实践中。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何在浏览器中优化JavaScript代码以进行性能？
Mar 18, 2025 pm 03:14 PM
本文讨论了在浏览器中优化JavaScript性能的策略，重点是减少执行时间并最大程度地减少对页面负载速度的影响。
如何使用浏览器开发人员工具有效调试JavaScript代码？
Mar 18, 2025 pm 03:16 PM
本文讨论了使用浏览器开发人员工具的有效JavaScript调试，专注于设置断点，使用控制台和分析性能。
如何使用源地图调试缩小JavaScript代码？
Mar 18, 2025 pm 03:17 PM
本文说明了如何使用源地图通过将其映射回原始代码来调试JAVASCRIPT。它讨论了启用源地图，设置断点以及使用Chrome DevTools和WebPack之类的工具。
谁得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript开发者的薪资没有绝对的高低，具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大，薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。
开始使用Chart.js：PIE，DONUT和BUBBLE图表
Mar 15, 2025 am 09:19 AM
本教程将介绍如何使用 Chart.js 创建饼图、环形图和气泡图。此前，我们已学习了 Chart.js 的四种图表类型：折线图和条形图（教程二），以及雷达图和极地区域图（教程三）。 创建饼图和环形图 饼图和环形图非常适合展示某个整体被划分为不同部分的比例。例如，可以使用饼图展示野生动物园中雄狮、雌狮和幼狮的百分比，或不同候选人在选举中获得的投票百分比。 饼图仅适用于比较单个参数或数据集。需要注意的是，饼图无法绘制值为零的实体，因为饼图中扇形的角度取决于数据点的数值大小。这意味着任何占比为零的实体
初学者的打字稿，第2部分：基本数据类型
Mar 19, 2025 am 09:10 AM
掌握了入门级TypeScript教程后，您应该能够在支持TypeScript的IDE中编写自己的代码，并将其编译成JavaScript。本教程将深入探讨TypeScript中各种数据类型。 JavaScript拥有七种数据类型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。TypeScript在此基础上定义了更多类型，本教程将详细介绍所有这些类型。 Null数据类型 与JavaScript一样，TypeScript中的null
