对 jquery.carousel.js 进行修改
来源：互联网 发布：utf8与gbk相互转换java 编辑：程序博客网 时间：2024/06/05 05:23
在已有的插件 jquery.carousel.js 根据自己的需求进行的修改。
在使用已有的jquery.carousel.js过程中，出现了一些问题，自己进行小小小的修改
如图样式：不自动轮播，当前页面显示蒙版遮罩，文字。
html
<div class="food-carousel"> <div class = "carourselThree poster-main" data-setting = '{ "width":1180, "height":430, "posterWidth":700, "posterHeight":430, "scale":0.8, "isAutoplay":"false", "dealy":"100", "algin":"middle" }'> <ul class = "poster-list"> <li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%"> <div class="div-text"> <h3>营养膳食1</h3> <p>Nutritional Diet</p> </div> </li> <li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%"> <div class="div-text"> <h3>营养膳食2</h3> <p>Nutritional Diet</p> </div> </li> <li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%"> <div class="div-text"> <h3>营养膳食3</h3> <p>Nutritional Diet</p> </div> </li> <li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%"> <div class="div-text"> <h3>营养膳食4</h3> <p>Nutritional Diet</p> </div> </li> <li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%"> <div class="div-text"> <h3>营养膳食5</h3> <p>Nutritional Diet</p> </div> </li> <li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%"> <div class="div-text"> <h3>营养膳食6</h3> <p>Nutritional Diet</p> </div> </li> <li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%"> <div class="div-text"> <h3>营养膳食7</h3> <p>Nutritional Diet</p> </div> </li> <li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%"> <div class="div-text"> <h3>营养膳食8</h3> <p>Nutritional Diet</p> </div> </li> <li class = "poster-item"><img src="img/temp/index_16.jpg" width = "100%" height="100%"> <div class="div-text"> <h3>营养膳食9</h3> <p>Nutritional Diet</p> </div> </li> </ul> <div class = "poster-btn poster-prev-btn"> <i class="icon-arrow-left"></i> </div> <div class = "poster-btn poster-next-btn"> <i class="icon-arrow-right"></i> </div> </div> </div>css
/*部分样式*/ /*转转木马 插件样式*/ .poster-main{ position: relative; width: 900px; height: 430px; } .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: 60px; margin-left: 270px; } .poster-main .poster-next-btn{ right: 60px; } .poster-main{ .poster-next-btn,.poster-prev-btn{ font-size: 36px; color: @white; margin-top: 180px; } }js
//自定义部分代码 var len = $('.food-carousel .poster-item').length-1; $('.poster-prev-btn i').click(function(){ $('.food-carousel .poster-item').each(function(index){ var _left = $(this).css('left'); var _leftNumber = _left.substr(0,3); if(_leftNumber == 240){ $('.food-carousel .poster-item').children('.div-text').hide(); if($(this).index() == 0){ $('.food-carousel .poster-item:eq('+ len +')').children('.div-text').show(); }else{ $(this).prev().children('.div-text').show(); } }else{ $(this).prev().children('.div-text').hide(); } }); }); $('.poster-next-btn i').click(function(){ $('.food-carousel .poster-item').each(function(){ var _left = $(this).css('left'); var _leftNumber = _left.substr(0,3); if(_leftNumber == 240){ $('.food-carousel .poster-item').children('.div-text').hide(); if($(this).index() == len){ $('.food-carousel .poster-item:eq(0)').children('.div-text').show(); }else{ $(this).next().children('.div-text').show(); } }else{ $(this).next().children('.div-text').hide(); } }); }); //初始化 Caroursel.init($('.carourselThree')); //修改过的已有代码 /** *Created by Zhangyx on 2015/10/15. * Modified by pxt on 2016/06/29. */ ;(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 i = level; 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), "opacity":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), "opacity":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)阅读全文
0 0
- 对 jquery.carousel.js 进行修改
- bootstrap 修改carousel 样式
- 用jQuery—ui对表格进行修改数据
- 使用jquery对片段的样式进行添加修改
- JS使用DOM对元素进行添加和修改
- 对JQuery进行下标操作得到的是js对象
- 对文件名进行修改
- jQuery Feature Carousel 旋转插件
- 用js对table进行解析的demo,及用js修改table中文字颜色
- angular js轮播图 （Carousel (ui.bootstrap.carousel)）
- Carousel
- Carousel
- 可滑动切换的图片轮播——bootstrap中的carousel插件,hammer.js,jquery.hammer.js
- jQuery 点击table一行 并对当前行的某一列进行修改
- 利用jQuery提取和修改文本内容进而对文本内容进行对调
- jQuery 对Select 进行操作
- jQuery 对表格进行操作
- jQuery对节点进行操作
- Bash Shell字符串操作小结
- mysql数据库优化
- 好的文章要分享
- HDFS错误Name node is in safe mode的解决方法
- 走向大神之路的必备git命令操作
- 对 jquery.carousel.js 进行修改
- AWS-G2.2xlarge的Redhat7.2上安装Nvidia驱动、CUDA7.5和cudnn4.0
- python import用法
- HBuilder自定义dialog
- codeforces 822 C Hacker, pack your bags!
- standardUserDefaults 的使用
- GCD的理解与使用
- hdu_round1-1007 吃巧克力(计算几何)
- Firefox关闭GET请求到detectportal.firefox.com网站的方法
