基于jQuery的自动轮播特效

通过一个实例展示了jQuery如何实现自动轮播的特殊效果。分享给大家参考。具体如下：这是一个基于jQuery的自动轮播特效代码，实现过程非常简单。运行渲染：检查效果并下载源代码。

简短教程jquery . carousel . js是一个非常实用的jquery carousel插件，可以自动旋转。转盘将图片堆叠起来，依次推到前面进行显示，从而形成转盘效果。方法来使用jQuery carousel插件，就需要引入jQuery，jquery.carousel.js文件。

script src=' http : js/jquery . min . js '/script script src=' http 3360 js/jquery . carousel . js '/script html结构。

jQuery Carousel插件使用一个div作为包装元素，里面是一个放置图片的无序列表，前后两个div元素作为导航按钮。

div class=' carousel rotor-demo ' Ul class=' rotor-list ' Li class=' rotor-item ' img src=' http : image/1 . jpg '/Li Li class=' rotor-item ' img src=' http : image/2 . jpg '/Li/Ul div class=' rotor-btnrotator-prev-BTN '/divCSS样式

您需要为这个旋转木马特效添加以下必要的CSS样式。旋转器-主{位置：相对；宽度： 900 px；高度： 400px}。旋转器-主a，旋转器-主img { display:块；} .旋转器-主。旋转器列表{ width: 900px高度： 400px}。旋转器-主。旋转列表。旋转器-项目{位置：绝对；left: 0pxtop: 0px}。旋转器-主。旋转器-BTN { position : absolute；高度： 100%；宽度： 100 px；top: 0pxz-index : 10；opa city 3360 0；} .旋转器-主。旋转器-prev-BTN { left : 0px；背景： url('./image/btn_l.png ')无重复中心中心；背景-颜色：红色}。旋转器-主。旋转器-下一个-BTN { right : 0px；背景： url('./image/btn_r.png ')无重复中心中心；背景-color: red}初始化插件。

加载页面DOM元素后，可以通过以下方法初始化轮播插件。Carousel.init ($(')。carousel’))如果需要自定义一些参数，可以在顶部div元素中设置数据设置属性。

div=' carousel rotator-main ' data-setting=' { ' width ' :1000，carousel ' height ' :270的宽度，//carousel ' posterWidth ' :640的高度，//当前显示图片的宽度为' posterHeight ' :270，//当前显示图片的高度为' scale':0.8，///缩放值为'褐藻胶' :'middle '，/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' titlejQuery自动轮播旋转木马插件/title link rel='样式表type=' text/CSS ' href=' CSS/normalize。CSS '/link rel='样式表type=' text/CSS ' href=' CSS/default。' CSS '链接类型=' text/CSS ' rel='样式表href=' CSS/轮播。“CSS”样式类型=“文本/CSS”.carousel { margin :150 px auto }/style！-[if IE]脚本src=' http :http://libs。useso。com/js/html 5 shiv/3.7/html 5 shiv。量滴js '/脚本！[endif]-/head body article class=' htmleaf-container ' header class=' htmleaf-header ' h1jQuery自动轮播旋转木马插件/h1/header div class=' carousel poster-main ' data-setting=' { ' width ' :1000，' height':270，' posterWidth':640，' posterHeight ' :270，' scale':0.8，' dealy':'2000 '，褐藻胶' : '中间} ' ul class='海报-列表' Li class='海报-项目' img src=' http : image/1。jpg ' width=' 100% ' height=' 100% '/Li class=' poster-item ' img src=' http : image/2。jpg ' width=' 100% ' height=' 100% '/Li class=' poster-item ' img src=' https轮播')/脚本/正文/html为大家分享的jQuery实现自动轮播旋转木马特效代码，希望大家可以喜欢，并应用到实践中。