html5 自动播放轮播插件,基于jQuery实现自动轮播旋转木马特效

旧城等待， 2022-10-05 13:49 194阅读 0赞

本文实例讲述了jQuery实现自动轮播旋转木马特效。分享给大家供大家参考。具体如下：

这是一款基于jQuery实现自动轮播旋转木马特效代码，实现过程很简单。

运行效果图：           -------------------查看效果 下载源码-------------------

![c76155d78770efd1bed6f424e69038e5.png][]

简要教程

jquery.caroursel.js是一款非常实用的可自动轮播的jQuery旋转木马插件。该旋转木马将图片进行堆叠，轮流的将图片推送到最前面来展示，形成旋转木马的效果。

使用方法该jQuery旋转木马插件需要引入jQuery，jquery.carousel.js文件。

HTML结构

该jQuery旋转木马插件使用一个

来作为包裹元素，在它里面是一个无序列表，用于放置图片，以及两个作为前后导航按钮的

元素。

*  ![1.jpg][]
 *  ![2.jpg][1.jpg]
 *  ![3.jpg][1.jpg]

图片的数量需要为奇数张，否则显示会有一些异常，这是该插件的一个小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'))

如果你需要自定义一些参数，可以在顶层

元素中设置data-setting属性。

data-setting = '\{

"width":1000, //旋转木马的宽度

"height":270, //旋转木马的高度

"posterWidth":640, //当前显示的图片的宽度

"posterHeight":270, //当前显示的图片的高度

"scale":0.8, //缩放值

"algin":"middle", //对齐方式

"speed":"1000", //动画速度

"isAutoplay":"true", //自动播放

"dealy":"1000" //延迟时间

\}'>

小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。

为大家分享的jQuery实现自动轮播旋转木马特效代码如下

jQuery自动轮播旋转木马插件

.caroursel\{margin:150px auto;\}

# jQuery自动轮播旋转木马插件 #

*  ![1.jpg][]
 *  ![2.jpg][1.jpg]
 *  ![3.jpg][1.jpg]
 *  ![4.jpg][1.jpg]
 *  ![5.jpg][1.jpg]
 *  ![6.jpg][1.jpg]
 *  ![1.jpg][]

Caroursel.init($('.caroursel'))

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

[c76155d78770efd1bed6f424e69038e5.png]: /images/20221005/84efaf97b249439e97b19ede515c76e3.png
[1.jpg]:

发表评论取消回复

表情：

评论列表（有 0 条评论，194人围观）

还没有评论，来说两句吧...

相关阅读

相关 css3+js 旋转木马轮播特效

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8">

偏执的太偏执、/ 2022年12月13日 11:20/ 0 赞/ 184 阅读

相关无缝轮播/自动轮播

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

爱被打了一巴掌/ 2022年10月27日 00:30/ 0 赞/ 249 阅读

相关 html5+自动播放轮播插件,15个超强的jQuery/HTML5图片轮播插件

最近我们为大家分享过不少基于jQuery的图片轮播插件，当然也有很多使用了HTML5和CSS3的相关技术，让整个图片播放器显得更加美观，动画效果显得更加炫酷。这次我们特意为大家

深藏阁楼爱情的钟/ 2022年10月06日 13:53/ 0 赞/ 722 阅读

相关 html5 自动播放轮播插件,基于jQuery实现自动轮播旋转木马特效

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

旧城等待，/ 2022年10月05日 13:49/ 0 赞/ 195 阅读

相关 html广告轮播+自动播放,js简单的轮播自动播放的实现

Title //获取显示的盒子 var box = document.getElementById('box'); //设置图片地址 var imgs = \['./i

旧城等待，/ 2022年10月05日 12:47/ 0 赞/ 144 阅读

相关 html图片轮播15个自动,15个超强的jQuery/HTML5图片轮播插件

最近咱们为你们分享过很多基于jQuery的图片轮播插件，固然也有不少使用了HTML5和CSS3的相关技术，让整个图片播放器显得更加美观，动画效果显得更加炫酷。此次咱们特地为你们

迷南。/ 2022年10月05日 12:45/ 0 赞/ 861 阅读

相关 html简单实现自动轮播代码怎么写,js+html+css实现手动轮播和自动轮播

本文实例为大家分享了js+html+css实现手动轮播和自动轮播的具体代码，供大家参考，具体内容如下原理：设置图片层的总长=单张图片长度\张数；在轮播层中利用overflo

左手的ㄟ右手/ 2022年10月05日 10:46/ 0 赞/ 275 阅读

相关自动轮播图html css js代码,js轮播(自动轮播图html代码)

就是给这几个图片弄一个定时器，把图片先定位到一个地方，给定时器一个时间，比如五秒，最初让除了第一个图片外的其他的都消失。前五秒显示的是第一张图片，五秒. 请直接复制我的以下代

比眉伴天荒/ 2022年09月02日 14:57/ 0 赞/ 272 阅读

相关 jquery实现图片自动轮播

这是自己以前实现的功能，在此和大家一起分享，以后多写博客咯，方便与大家共享知识，也为了自己可以更好的记忆。源代码： <!DOCTYPE html PUB

你的名字/ 2022年08月21日 03:15/ 0 赞/ 216 阅读

相关基于jquery实现轮播图自动轮播，不用插件

html部分: ![Image 1][] ![Image 1][] ![Image 1][] ![Image 1][] <div class

深藏阁楼爱情的钟/ 2022年04月12日 21:08/ 0 赞/ 635 阅读