




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1、非常好用的无缝轮播代码(向左平滑)/* * 本动画基于jquery框架 * 勤奋的迷糊君 2015-7-10 * Begin * param btn div个数索引 * param i 位置参数 * param w 宽度索引初始值 * param currentIndex bnner按钮位置索引 * param speed 动画速度 * param interval 间隔时间 * param imgWidth 运动宽度 */function banner() var i = 0var currentIndex = i;var lastEq = $("#bannerImgBox li&
2、quot;).lengthvar speed = 600/动画速度var interval = 3600/间隔时间var imgWidth = $(".bannerImg").width() if(lastEq > 1 ) function use1() /封装一个动作(设置图片绝对位置下的left属性及层叠关系下的show和hide)$("#bannerImgBox li").css(left:imgWidth)$("#bannerImgBox li").hide()$("#bannerImgBox li"
3、).eq(i).show()function use2() /封装一个动作(变更z-index属性)$("#bannerImgBox li").css(zIndex:0)$("#bannerImgBox li").eq(i).css(zIndex:5)$("#bannerImgBox li").css(left:imgWidth) function use3() /封装一个动作(设置图片绝对位置下的left属性及层叠关系下的show和hide;向左并与鼠标事件关联)$("#bannerImgBox li").css
4、(left:imgWidth)$("#bannerImgBox li").hide() $("#bannerImgBox li").eq(currentIndex).show() function useMinF() /封装一个动作(配合animate改变图片left属性)if(i < lastEq - 1) $("#bannerImgBox li").eq(i+1).css(left:imgWidth*2)$("#bannerImgBox li").eq(i + 1).show(i = i+1 )curre
5、ntIndex = i /索引值为ielse $("#bannerImgBox li").eq(0).css(left:imgWidth*2)$("#bannerImgBox li").eq(0).show(i = 0) currentIndex = i$("#bannerImgBox").animate("left":-imgWidth*2, speed, function() $("#bannerImgBox").animate("left":-imgWidth,0);
6、/向左运动并重置位置use2()/执行use2函数if(i < lastEq - 1) $("#bannerImgBox li").eq(i - 1).hide()else $("#bannerImgBox li").eq(0).hide()function useMinR() /封装一个动作(设置图片绝对位置下的left属性及层叠关系下的show和hide;向右并与鼠标事件关联)if(i <= lastEq - 1 && i > 0 ) $("#bannerImgBox li").eq(i-1).c
7、ss(left:0)$("#bannerImgBox li").eq(i - 1).show(i = i-1 )currentIndex = i/ 自定义索引值赋值else $("#bannerImgBox li").eq(lastEq - 1).css(left:0)$("#bannerImgBox li").eq(lastEq - 1).show(i = lastEq - 1)currentIndex = lastEq - 1 / 自定义索引值赋值$("#bannerImgBox").animate("
8、;left":0, speed, function()$("#bannerImgBox").animate("left":-imgWidth,0);use2()/执行use2函数if(i <= lastEq - 1 && i > 0 ) $("#bannerImgBox li").eq(i - 1).hide()else $("#bannerImgBox li").eq(lastEq - 1).hide()function ScrollLeftX() use3()useMinF
9、()/执行use3和useMinF函数点击向在Minfunction ScrollRightX() use3()useMinR()/执行use3和useMinR函数,点击向右Minfunction ScrollLeft() use1()useMinF()/执行use1和useMinF函数,图片自动向左滚动Minfunction ScrollRight() use1()useMinR()/执行use1和useMinR函数,图片自动向右滚动Minfunction AutoScollObj() ScrollLeft();colorPotion()var AutoScroll = setInterva
10、l(AutoScollObj, interval)/每隔interval毫秒执行一次ScrollLeft和colorPotion,并赋值给 AutoScroll;图片自动滚动$("#banner").hover(function()$(".lrBox").show();/鼠标移入显示箭头clearInterval(AutoScroll);/清除自动滚动setTimeout(function () flag=true;, speed) , function()flag=false;/图片滚动时,鼠标动作不生效$(".lrBox").hi
11、de();/鼠标移出隐藏箭头AutoScroll = setInterval(AutoScollObj, interval)/鼠标移出后再次执行)function gotoLeft() / 点击左箭头if(flag) flag=false;/ 动画结束前鼠标事件失效ScrollRight();setTimeout(function () flag=true;, speed)colorPotion()function gotoRight() / 点击右箭头if(flag) flag=false; / 动画结束前鼠标事件失效ScrollLeft();setTimeout(function () f
12、lag=true;/ 动画结束鼠标事件生效, speed)colorPotion();for(var btn = 0; btn < lastEq; btn+)/根据图片数量创建焦点并判断宽度使div居中var childdiv=$('<div></div>')childdiv.attr('class','bannerBtn'); /赋类childdiv.appendTo("#bannerBtnBox");/赋Idvar wTemp = 0; / 焦点按钮父级盒子的宽度初始值$(".ban
13、nerBtn").each(function()wTemp += parseInt($(this).width();/获取宽度并累加);$("#bannerBtnBox").width(wTemp);/赋宽度$(".bannerBtn").css("cursor","pointer")/手型鼠标$(".bannerBtn").eq(0).addClass("bannerBtnRed");/第一个焦点为红色$(".zJt").click(funct
14、ion()gotoLeft()/图片向左)$(".yJt").click(function()gotoRight()/图片向右)function colorPotion() /封装一个动作(焦点变色)$(".bannerBtn").removeClass("bannerBtnRed")$(".bannerBtn").eq(i).addClass("bannerBtnRed")$(".bannerBtn").click(function() / 通过索引判断图片以及焦点向左或向右if(flag)flag = false;/ 动画结束前鼠标事件失效$(".bannerBtn").removeClass("bannerBtnRed");$(this).addClass("bannerBtnRed");var clickIndex = $(this).index();/ 自定义索引值赋值if(clickIndex < currentIndex) i = $(".bannerBtn").index(this)+1 ;/建立位置索引并赋值给iScrollRig
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- TD/T 1033-2012高标准基本农田建设标准
- JJG(烟草)25-2010烟丝填充值测定仪检定规程
- JJF(烟草)4.5-2010烟草及烟草制品连续流动法测定常规化学成分测量不确定度评定指南第5部分:钾
- 联合中考押题语文试题(PDF版、含解析)
- 2025年注册计量师计量专业案例分析模拟试卷(测量误差与不确定度)-案例解析与预测
- 考研复习-风景园林基础考研试题【综合题】附答案详解
- 风景园林基础考研资料试题及答案详解【典优】
- 《风景园林招投标与概预算》试题A附参考答案详解【培优b卷】
- 2025-2026年高校教师资格证之《高等教育法规》通关题库带答案详解(综合题)
- 2025年济南四建集团有限责任公司招聘笔试备考题库及一套参考答案详解
- GB/T 30828-2014预应力混凝土用中强度钢丝
- 井下作业修井防喷演习手动双闸板防喷器课件
- 《月光下的中国》朗诵稿
- 围手术期低体温护理研究进展课件
- MSA量测系统分析RMSA量测系统分析课件
- 麻醉与肝脏课件
- 高质量心肺复苏
- 锅炉防磨防爆总结汇报课件
- 井巷工程课程设计-2篇
- 《高等数学》全册教案教学设计
- 工程样板验收表格
评论
0/150
提交评论