轮播图——旋转木马（Jquery）
发布日期：2021-05-07 08:56:55
浏览次数：9
分类：原创文章
本文共 11424 字，大约阅读时间需要 38 分钟。
注：来源于网络整理而成
使用
该jQuery旋转木马插件需要引入jQuery，carousel.js、carousel.css文件
HTML
<!doctype html><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></title> <link type="text/css" rel="stylesheet" href="css/carousel.css"> <style type="text/css"> .caroursel { margin: 150px auto; } </style> </head> <body> <article class="htmleaf-container"> <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 src="js/jquery-2.1.1.min.js"></script> <script src="js/jquery.carousel.js"></script> <script> Caroursel.init($('.caroursel')) //初始化插件 </script> </body></html>该jQuery旋转木马插件使用一个<div>来作为包裹元素，在它里面是一个无序列表，用于放置图片，以及两个作为前后导航按钮的<div>元素
注：
1、导航按钮图片地址，在css文件中，更换图片需要修改
2、图片的数量需要为奇数张，否则显示会有一些异常，这是该插件的一个小bug
初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该旋转木马插件
Caroursel.init($('.caroursel')) 如果你需要自定义一些参数，可以在顶层
元素中设置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" //延迟时间}'> carousel.css
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin: 0; padding: 0;}table { border-collapse: collapse; border-spacing: 0;}fieldset,img { border: 0;}address,caption,cite,code,dfn,em,strong,th,var { font-style: normal; font-weight: normal;}ol,ul { list-style: none;}caption,th { text-align: left;}h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: normal;}q:before,q:after { content: ;}abbr,acronym { border: 0;}.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}.clearfix { zoom: 1;}.poster-main { position: relative; width: 900px; height: 270px}.poster-main a,.poster-main img { display: block;}.poster-main .poster-list { width: 900px; height: 270px}.poster-main .poster-list .poster-item { position: absolute; left: 0px; top: 0px}.poster-main .poster-btn { position: absolute; height: 100%; width: 100px; top: 0px; z-index: 10; opacity: 0.3;}.poster-main .poster-prev-btn { left: 0px; background: url("../image/btn_l.png") no-repeat center center; background-color: red}.poster-main .poster-next-btn { right: 0px; background: url("../image/btn_r.png") no-repeat center center; background-color: red}carousel.js
/** * Created by Zhangyx on 2015/10/15. */;(function($){ var Caroursel = function (caroursel){ var self = this; this.caroursel = caroursel; this.posterList = caroursel.find(".poster-list"); this.posterItems = caroursel.find(".poster-item"); this.firstPosterItem = this.posterItems.first(); this.lastPosterItem = this.posterItems.last(); this.prevBtn = this.caroursel.find(".poster-prev-btn"); this.nextBtn = this.caroursel.find(".poster-next-btn"); //Ĭ�ϲ��� this.setting = { "width":"1000", "height":"270", "posterWidth":"640", "posterHeight":"270", "scale":"0.8", "speed":"1000", "isAutoplay":"true", "dealy":"1000" } //�Զ��������Ĭ�ϲ���ϲ� $.extend(this.setting,this.getSetting()) //���õ�һ֡λ�� this.setFirstPosition(); //����ʣ��֡��λ�� this.setSlicePosition(); //��ת this.rotateFlag = true; this.prevBtn.bind("click",function(){ if(self.rotateFlag){ self.rotateFlag = false; self.rotateAnimate("left") } }); this.nextBtn.bind("click",function(){ if(self.rotateFlag){ self.rotateFlag = false; self.rotateAnimate("right") } }); if(this.setting.isAutoplay){ this.autoPlay(); this.caroursel.hover(function(){ clearInterval(self.timer)},function(){ self.autoPlay()}) } }; Caroursel.prototype = { autoPlay:function(){ var that = this; this.timer = window.setInterval(function(){ that.prevBtn.click(); },that.setting.dealy) }, rotateAnimate:function(type){ var that = this; var zIndexArr = []; if(type == "left"){ //�����ƶ� this.posterItems.each(function(){ var self = $(this), prev = $(this).next().get(0)?$(this).next():that.firstPosterItem, width = prev.css("width"), height = prev.css("height"), zIndex = prev.css("zIndex"), opacity = prev.css("opacity"), left = prev.css("left"), top = prev.css("top"); zIndexArr.push(zIndex); self.animate({ "width":width, "height":height, "left":left, "opacity":opacity, "top":top, },that.setting.speed,function(){ that.rotateFlag = true; }); }); this.posterItems.each(function(i){ $(this).css("zIndex",zIndexArr[i]); }); } if(type == "right"){ //�����ƶ� this.posterItems.each(function(){ var self = $(this), next = $(this).prev().get(0)?$(this).prev():that.lastPosterItem, width = next.css("width"), height = next.css("height"), zIndex = next.css("zIndex"), opacity = next.css("opacity"), left = next.css("left"), top = next.css("top"); zIndexArr.push(zIndex); self.animate({ "width":width, "height":height, "left":left, "opacity":opacity, "top":top, },that.setting.speed,function(){ that.rotateFlag = true; }); }); this.posterItems.each(function(i){ $(this).css("zIndex",zIndexArr[i]); }); } }, setFirstPosition:function(){ this.caroursel.css({ "width":this.setting.width,"height":this.setting.height}); this.posterList.css({ "width":this.setting.width,"height":this.setting.height}); var width = (this.setting.width - this.setting.posterWidth) / 2; //����������ť����ʽ this.prevBtn.css({ "width":width , "height":this.setting.height,"zIndex":Math.ceil(this.posterItems.size()/2)}); this.nextBtn.css({ "width":width , "height":this.setting.height,"zIndex":Math.ceil(this.posterItems.size()/2)}); this.firstPosterItem.css({ "width":this.setting.posterWidth, "height":this.setting.posterHeight, "left":width, "zIndex":Math.ceil(this.posterItems.size()/2), "top":this.setVertialType(this.setting.posterHeight) }); }, setSlicePosition:function(){ var _self = this; var sliceItems = this.posterItems.slice(1), level = Math.floor(this.posterItems.length/2), leftItems = sliceItems.slice(0,level), rightItems = sliceItems.slice(level), posterWidth = this.setting.posterWidth, posterHeight = this.setting.posterHeight, Btnwidth = (this.setting.width - this.setting.posterWidth) / 2, gap = Btnwidth/level, containerWidth = this.setting.width; //�������֡��λ�� var i = 1; var leftWidth = posterWidth; var leftHeight = posterHeight; var zLoop1 = level; leftItems.each(function(index,item){ leftWidth = posterWidth * _self.setting.scale; leftHeight = posterHeight*_self.setting.scale; $(this).css({ "width":leftWidth, "height":leftHeight, "left": Btnwidth - i*gap, "zIndex":zLoop1--, "opacity":1/(i+1), "top":_self.setVertialType(leftHeight) }); i++; }); //��������֡��λ�� var j = level; var zLoop2 = 1; var rightWidth = posterWidth; var rightHeight = posterHeight; rightItems.each(function(index,item){ var rightWidth = posterWidth * _self.setting.scale; var rightHeight = posterHeight*_self.setting.scale; $(this).css({ "width":rightWidth, "height":rightHeight, "left": containerWidth -( Btnwidth - j*gap + rightWidth), "zIndex":zLoop2++, "opacity":1/(j+1), "top":_self.setVertialType(rightHeight) }); j--; }); }, getSetting:function(){ var settting = this.caroursel.attr("data-setting"); if(settting.length > 0){ return $.parseJSON(settting); }else{ return { }; } }, setVertialType:function(height){ var algin = this.setting.algin; if(algin == "top") { return 0 }else if(algin == "middle"){ return (this.setting.posterHeight - height) / 2 }else if(algin == "bottom"){ return this.setting.posterHeight - height }else { return (this.setting.posterHeight - height) / 2 } } } Caroursel.init = function (caroursels){ caroursels.each(function(index,item){ new Caroursel($(this)); }) ; }; window["Caroursel"] = Caroursel;})(jQuery)发表评论
最新留言
网站不错 人气很旺了 加油
[***.192.178.218]2025年03月24日 02时51分41秒
关于作者
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！
-- 愿君每日到此一游！
推荐文章
FANUC机器人R-30iB_R-30iB PLUS备件规格型号统计整理
2019-03-04
如何在VM station虚拟机中安装西门子博途TIA PORTAL？
2019-03-04
FANUC机器人的镜像备份操作及U盘格式化具体步骤
2019-03-04
vue-依赖-点击复制
2019-03-04
js井子棋
2019-03-04
css取消双击选中文字
2019-03-04
LeetCode 116填充每个节点的下一个右侧结点指针
2019-03-04
C++小笔记——function绑定重载函数、私有继承用的条件
2019-03-04
最近一些算法题的总结
2019-03-04
2021-4-28【PTA】【L2-1 包装机 (25 分)】
2019-03-04
2021-5-2【指针】【作业】【指针代替下标进行数组编程】
2019-03-04
Arduino mega2560+MPU6050利用加速度值控制舵机
2019-03-04
pycharm+python+MS SQLSERVER 实战2、实现爬虫程序。
2019-03-04
判断字符是否出现
2019-03-04
深入理解数组指针与指针数组的区别
2019-03-04
iOS客户端与PHP服务端的简单交互
2019-03-04
图像Exif Orientation
2019-03-04
Python的异常处理
2019-03-04
Kubernetes（k8s）的调度器详细介绍
2019-03-04
Linux的网络参数设置
2019-03-04
白红宇的个人博客 - 记录点点滴滴的事 - 您是第 455347456 位访客