常用插件的封装（轮播图、选项卡、楼梯导航及、拖拽）
2024-05-14 04:45:55
PC端轮播图
1. 第一种轮播图（自动慢慢滑动，多用于展示）
HTML部分：
<div id="box"> <ul id="banner"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul>
</div>CSS部分：
<style>
*{ margin: 0; padding: 0;
}
#box{ width: 280px; margin: 100px auto 0px; background-color: red; overflow: hidden;
}
ul{ width: 560px; overflow: hidden;
}
ul li{ width: 60px; height: 200px; margin-right: 10px; background-color: purple; list-style: none; float: left; line-height: 200px; font-size: 30px; text-align: center;
}
</style>JS部分：
<script> $(function(){ var str=$("#banner").html();// 复制结构 $("#banner").html(str+str); $("#banner").width($("#banner li").length*70); var index=0;//启动定时器 function moveChange(){ index++; if(index>560){//走完一组图片时，将ul拉回0的位置 $("#banner").css("marginLeft",0+"px"); index=0; } $("#banner").css("marginLeft",-index+"px"); } var t=setInterval(moveChange,30) })
</script>复制代码var str=$("#banner").html();// 复制结构 $("#banner").html(str+str); 复制代码
2. 第二种轮播图（普通轮播图）
结构样式与第二种一样
$(function(){ $("#left").click(function(){ // 如何判断一个元素是否在执行动画，如果在执行动画返回true，没有在执行，返回false// console.log($("#banner").is(":animated")) if(!$("#banner").is(":animated")){ $("#banner li").last().prependTo($("#banner"))// 需要将变过来的第一个li藏出去$("#banner").css("marginLeft","-70px") $("#banner").animate({ "marginLeft":0 },600) } }) $("#right").click(function(){ if(!$("#banner").is(":animated")){ $("#banner").animate({ "marginLeft":-70+"px" },600,function(){ $("#banner li").first().appendTo($("#banner")) $("#banner").css("marginLeft",0) }) } })
})
复制代码- 如何判断一个元素是否在执行动画，如果在执行动画返回true，没有在执行，返回false
3. 第三种轮播图 （无缝滚动）
HTML部分：
<div class="wrap"> <ul class="pics"> <li> <img src="http://ossweb-img.qq.com/upload/adw/image/20180907/f5f977d8fb73c74b95cea639287731a8.jpg"></li> <li> <img src="http://ossweb-img.qq.com/upload/adw/image/20180913/be03a5d0ebe5d46c4ff8ca7c5bdbde0b.jpg"></li> <li> <img src="http://ossweb-img.qq.com/upload/adw/image/20180907/d50b8d9c637b31b7a126f7a6ad567bba.jpg"></li> <li> <img src="http://ossweb-img.qq.com/upload/adw/image/20180911/d0c78c8cf0ea007281572a6da71e7dc6.jpg"></li> <li> <img src="http://ossweb-img.qq.com/upload/adw/image/20180913/e4dc5d051d9ca0ef4c99d62cec0b4612.jpg"></li> </ul> <ul class="picNav"> <li class="active">魔影秘藏</li> <li>七周年15点直播</li> <li>7周年战斗之夜</li> <li>西部魔影全新皮肤</li> <li>玉剑传说限时销售</li> </ul> <span class="picLeft"><</span> <span class="picRight">></span>
</div>CSS部分：
<style> *{ margin: 0; padding: 0; } .wrap{ width: 780px; height: 380px; overflow: hidden; position: relative; } .wrap .pics li{ width:780px; float: left; list-style: none; } .wrap .pics li img{ display: block; } .wrap .pics{ width: 3900px; } .wrap .picNav li{ width: 156px; height: 50px; float: left; list-style: none; background-color: black; color: white; line-height: 50px; text-align: center; cursor: pointer; } .wrap .picNav .active{ background-color: red; color:blue; } .wrap span{ width: 50px; height: 50px; background-color: #ccc; position: absolute; left: 0; top:137px; font-size: 40px; border-radius: 50%; text-align: center; line-height: 50px; opacity: 0.4; cursor: pointer; } .wrap .picRight{ left: 730px; }
</style>JS部分：
<script>$(function(){ function moveUl(index){ //移动ul的函数 $(".pics").stop().animate({ "marginLeft":-780*index+"px" },200) } function activeLi(index){//选中li的函数$(".picNav li").eq(index).addClass("active").siblings().removeClass("active")} $(".picNav").find("li").mouseenter(function(){index=$(this).index() activeLi(index) moveUl(index) }) var index=0; $(".picLeft").click(function(){ index==0?index=4:index++; moveUl(index) activeLi(index) }) $(".picRight").click(function(){ index==4?index=0:index-- moveUl(index)activeLi(index) }
})
</script>
复制代码4. 第四种轮播图（淘宝无缝滚动）
HTML部分：
<div class="wrap"> <ul class="pics"> <li> <img src="img/1.jpg" alt=""> </li> <li> <img src="img/2.jpg" alt=""> </li> <li> <img src="img/3.jpg" alt=""> </li> <li> <img src="img/4.jpg" alt=""> </li> <li> <img src="img/5.jpg" alt=""> </li> <li> <img src="img/1.jpg" alt=""> 复制第一张</li> </ul> <ul class="picNav"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> <span class="picLeft"><</span> <span class="picRight">></span>
</div>CSS部分：
<style> *{ margin: 0; padding: 0; } li{ list-style: none; } .wrap{ width: 520px; height: 280px; margin: 100px auto 0px; position: relative; overflow: hidden; } .wrap .pics{ width: 3120px; overflow: hidden; } .wrap .pics li{ width: 520px; height: 280px; float: left; } .picNav{ width: 70px; height: 13px; border-radius: 10px; background-color: #cccccc; position: absolute; bottom: 0px; left: 200px; } .picNav li{ width: 8px; height: 8px; background-color: white; border-radius: 50%; float: left; margin: 3px; cursor: pointer; } .picNav .active{ background-color: red; } .wrap span{ position: absolute; top: 120px; display: block; width: 30px; height: 50px; line-height: 50px; text-align: center; font-size: 30px; color: white; background-color: black; cursor: pointer; display: none; opacity: 0.5; } .wrap:hover span{ display: block; } .wrap span:hover{ opacity: 0.7; } .wrap .picLeft{ left: 0px; border-radius: 0px 25px 25px 0px; } .wrap .picRight{ right: 0px; border-radius: 25px 0px 0px 25px; }
</style>JS部分：
<script>$(function(){ var index=0; //轮播图导航的逻辑 $(".picNav").find("li").click(function(){ if(index==5){ //当在第5张图片的时候，瞬间回到第一张，解决bug $(".pics").css("marginLeft",0) } index=$(this).index() $(this).addClass("active").siblings().removeClass("active") $(".pics").stop().animate({ "marginLeft":-520*index+"px" },200) }) //左按钮 $(".picLeft").click(function(){ if(index==0){ $(".pics").css("marginLeft",-2600+"px") index=4 }else{ index-- } $(".pics").stop().animate({ "marginLeft":-520*index+"px" },200) $(".picNav li").eq(index).addClass("active").siblings().removeClass("active")}) //右按钮 $(".picRight").click(function(){if(index==5){$(".pics").css("marginLeft",0)index=1}else{index++} $(".pics").stop().animate({ "marginLeft":-520*index+"px"},200) if(index==5){ $(".picNav li").eq(0).addClass("active").siblings().removeClass("active")}else{ $(".picNav li").eq(index).addClass("active").siblings().removeClass("active")} }) })
</script>复制代码函数式封装
$(function(){ function moveUl(index){//移动整个ul的函数 $(".pics").stop().animate({ "marginLeft":-index*520+"px" },200) } function activeLi(index){//选中li的函数 $(".picNav li").eq(index).addClass("active").siblings().removeClass("active")} //轮播图导航的逻辑 var index=0; $(".picNav").find("li").click(function(){ if(index==5){ $(".pics").css("marginLeft",0) } index=$(this).index() $(this).addClass("active").siblings().removeClass("active")moveUl(index) }) //左按钮的实现 $(".picLeft").click(function(){ if(index==0){ $(".pics").css("marginLeft",-2600+"px") index=4; }else{ index--; } moveUl(index) activeLi(index) }) //右按钮的实现 $(".picRight").click(function(){ if(index==5){ $(".pics").css("marginLeft",0) index=1; }else{ index++; } moveUl(index) if(index==5){ activeLi(0) }else{ activeLi(index) } })
})复制代码淘宝无缝滚动轮播图插件的封装( slide.js)
$(function(){ $.fn.slide=function(options){ var defaults={ "bannerNavLi":".bannerNavLi",//导航按钮 "event":"click",// 事件类型 "bannerNavSelected":"active",// 控制导航按钮li的样式的类名 "leftButton":".bannerLeft",// 左按钮 "rightButton":".bannerRight",// 右按钮 "index":0,//默认显示第几张图片 "bannerName":".banner"// 放几张图片的那个框 } var settings=$.extend(defaults,options) this.each(function(){ var that=$(this) var index=settings.index; var imgWidth=that.find(settings.bannerName+" "+"img").width(); var length=that.find(settings.bannerNavLi).length $(this).find(settings.bannerNavLi).on(settings.event,function(){ if(index==length){// 这里的index是是外部的index，不是内部的， that.find(settings.bannerName).css("marginLeft",0) } var index1=$(this).index();// 注意这个这个名字 $(this).addClass(settings.bannerNavSelected).siblings().removeClass(settings.bannerNavSelected) that.find(settings.bannerName).stop().animate({ "marginLeft":-index1*imgWidth+"px" },200) }) $(this).find(settings.leftButton).click(function(){ if(index==0){ that.find(settings.bannerName).css("marginLeft",-length*imgWidth+"px") index=length-1; }else{ index-- } that.find(settings.bannerNavLi).eq(index).addClass(settings.bannerNavSelected).siblings().removeClass(settings.bannerNavSelected)that.find(settings.bannerName).stop().animate({ "marginLeft":-index*imgWidth+"px" },200) }) $(this).find(settings.rightButton).click(function(){ if(index==length){ that.find(settings.bannerName).css("marginLeft",0) index=1 }else{ index++ } if(index==length){ that.find(settings.bannerNavLi).eq(0).addClass(settings.bannerNavSelected).siblings().removeClass(settings.bannerNavSelected)}else{ that.find(settings.bannerNavLi).eq(index).addClass(settings.bannerNavSelected).siblings().removeClass(settings.bannerNavSelected)} that.find(settings.bannerName).stop().animate({ "marginLeft":-index*imgWidth+"px" },200) }) }) }
})复制代码tab选项卡插件封装( tab.js)
// 使用说明
// 选项卡封装成插件(.tab)
//默认事件为点击事件 默认导航类名为bannerLi
// 默认导航选中的类名为active
// 默认div的类名为 contentDiv
// 如果想更改，清传入
// { // event:"事件名称",
// banner:".导航类名",
// bannerSelected:"导航的选中类名",
// content:".显示区域div的名称（类名）"
// }$(function(){ $.fn.tab=function(options){//option是传入的参数 var defaults={//defaults是默认的参数 "event":"click", "banner":".bannerLi", "bannerSelected":"active", "content":".contentDiv", "bgcolor":"red" } var settings=$.extend(defaults,options)//settings是整合后的参数 this.each(function(){ var that=$(this) $(this).find(settings.banner).on(settings.event,function(){ var index=$(this).index() $(this).css("background-color",settings.bgcolor).siblings().css("background-color","")$(this).addClass(settings.bannerSelected).siblings().removeClass(settings.bannerSelected)that.find(settings.content).eq(index).show().siblings().hide() }) }) }
})复制代码移动端轮播图
触摸式轮播图
需求：1. 每一个图片的宽度；2. 当前图片的索引值；3. clientX
步骤：
1.当手指按下时，记录手指按下时的坐标,并且锁定方向
2.当手指移动时，计算手指移动的距离，并让对应的ul跟着手指的距离移动
3.当手指离开时，如果移动的距离大于一定范围时，进行换图（通过图片对应的索引值）
CSS ：
<style>*{ margin: 0; padding: 0; } .banner{ width: 3.75rem; height: 1.2rem; background-color: red; overflow: hidden; } .banner ul{ width: 15rem; height: 1.2rem; display: flex; } .banner ul li{ list-style: none; flex: 1; height: 1.2rem; } .banner ul li:first-child{ background-color: orange; } .banner ul li:nth-child(2){ background-color: blue; } .banner ul li:nth-child(3){ background-color: green; } .banner ul li:nth-child(4){ background-color: blueviolet; }
</style>复制代码HTML :
<div class="banner"> <ul> <li></li> <li></li> <li></li> <li></li> </ul>
</div>复制代码JS :
window.onload=function(){ var banner=document.querySelector(".banner"); var bannerUl=banner.querySelector("ul"); var bannerUlLi=bannerUl.querySelector("li"); var index=0; banner.addEventListener("touchstart",function(e){ // 1.当手指按下时，记录手指按下时的坐标，并且锁定方向 var x=e.targetTouches[0].clientX; var y=e.targetTouches[0].clientY; var dir=""; var distance; function fnMove(e){ var divX=e.targetTouches[0].clientX; var divY=e.targetTouches[0].clientY; if(dir==""){// 此处判定dir是否为空，是为了锁定方向(一次点击判定一次方向) if(Math.abs(divX-x)>5){ dir="0";//水平方向 }else if(Math.abs(divY-y)>5){ dir="1";// 垂直方向 } }else{ if(dir=="0"){ distance=divX-x;// 当前手指移动的距离 var num=-index*bannerUlLi.offsetWidth+distance; bannerUl.style.transition="none"; bannerUl.style.transform="translate("+num+"px)"; } } } function fnEnd(){ if(distance<-50){ index==3 ? index=3:index++; }else if(distance>50){ index==0 ? index=0:index--; } bannerUl.style.transform="translate("+-index*bannerUlLi.offsetWidth+"px)";bannerUl.style.transition="all 1s"; banner.removeEventListener("touchmove",fnMove); banner.removeEventListener("touchend",fnEnd); } banner.addEventListener("touchmove",fnMove,false); banner.addEventListener("touchend",fnEnd,false); },false)
}复制代码楼梯导航
HTML：
<ul class="nav"> <li class="navLi">1F</li> <li class="navLi">2F</li> <li class="navLi">3F</li> <li class="navLi">4F</li> <li class="navLi">5F</li> <li class="navLi">6F</li> <li class="navLi">7F</li> <li class="toTop">置顶</li>
</ul>
<div class="header">我是header</div>
<div class="main"> <div class="stair one">女装</div> <div class="stair two">鞋靴</div> <div class="stair three">童装玩具</div> <div class="stair four">家电</div> <div class="stair five">美妆</div> <div class="stair six">珠宝</div> <div class="stair seven">百货</div>
</div>
CSS：<style> *{ margin: 0; padding: 0; } .nav{ /* 绝对定位，相对于浏览器窗口进行定位 */ position: fixed; top: 100px; left: 20px; display: none; } ul li{ width: 50px; height: 50px; border: 3px solid #aaaaaa; border-bottom: none; line-height: 50px; text-align: center; background-color: rgb(255, 174, 127); font-size: 30px; cursor: pointer; list-style: none; opacity: .6; } ul li:hover{ background-color: #cccccc; opacity: .9; } ul li:last-child{ border: 3px solid #aaaaaa; font-size: 25px } .header{ width: 100%; height: 500px; background-color: red; font-size: 200px; text-align: center; } .main div{ width: 100%; height: 800px; font-size: 100px; text-align: center; } .main .one{ background-color: royalblue; } .main .two{ background-color: yellow; } .main .three{ background-color: blue; } .main .four{ background-color: green; } .main .five{ background-color: purple; } .main .six{ background-color: orange; } .main .seven{ background-color: aquamarine; }
</style>JS:
$(function(){ window.onscroll=function(){ // document.documentElement.scrollTop 当前页面的滚动条纵坐标位置 if (document.documentElement.scrollTop>=$(".main").offset().top) { $(".nav").show() }else{ $(".nav").hide() } } $(".nav").find(".navLi").click(function(){ var index=$(this).index() var H=$(".main .stair").eq(index).offset().top; $("html,body").animate({ "scrollTop":H },300) }) $(".toTop").click(function(){ $("html,body").animate({ "scrollTop":0 },200) })
})
复制代码拖拽
1. 移动端拖拽
HTML:
<div class="box"></div>
CSS:
<style>
*{ padding: 0; margin: 0;
}
.box{ width: 100px; height: 100px; position: absolute; left: 0; top: 0; background-color: blue;
}
</style>
JS:
window.onload=function(){ var box=document.querySelector(".box"); box.addEventListener("touchstart",function(e){ var divX=e.targetTouches[0].clientX-box.offsetLeft; var divY=e.targetTouches[0].clientY-box.offsetTop; function fnMove(e){ var x=e.targetTouches[0].clientX; var y=e.targetTouches[0].clientY; box.style.left=x-divX+"px"; box.style.top=y-divY+"px"; } box.addEventListener("touchmove",fnMove,false); box.addEventListener("touchend",function(){ box.removeEventListener("touchmove",fnMove) },false) },false)
}
复制代码2. PC端拖拽
window.onload=function(){ box=document.querySelector(".box"); box.addEventListener("mousedown",function(e){ var e=e||window.event; var divX=e.clientX-box.offsetLeft; var divY=e.clientY-box.offsetTop; function fnMove(e){ var x=e.clientX; var y=e.clientY; box.style.left=x-divX+"px"; box.style.top=y-divY+"px"; } function fnEnd(e){ box.removeEventListener("mousemove",fnMove); box.removeEventListener("mouseup",fnEnd); } box.addEventListener("mousemove",fnMove,false); box.addEventListener("mouseup",fnEnd,false); },false)
}复制代码常用插件的封装（轮播图、选项卡、楼梯导航及、拖拽）相关推荐
- IOS 封装轮播图
轮播图为一种常见的方式,常用于各种网站,或者App中,当然,作为APP的启动视图也是不错的选择. 闲时封装了一个,仅供新手参考. 1.新建工程,建立轮播图类 建立一个空的工程,新建一个类,起名为Car ...
- 组件封装 - 轮播图组件
轮播图组件封装, 我们主要分为三大步来完成: 1. 基本布局 2. 渲染结构 3. 逻辑封装 我们这里封装的轮播图组件和 Element UI 所封装的走马灯组件有所不同 Element UI 是直接 ...
- 通过swiper插件制作旋转木马轮播图
实现效果: swiper插件准备 我们旋转木马轮播图的效果可以通过swiper插件轻松搞定 这种效果是不是和我们要做的很像呀,我们只要把它引入我们的案例就ok了 在swiper官网的获取swiper下 ...
- banner轮播图以及nav导航栏Jquery
轮播图是非常常见的,主要方法是利用了*setInterval()*定时器.隔一段时间就自动显示下一张图片. 首先制作导航栏 导航栏的制作非常简单.一般在写导航栏时,都是使用li+a标签的方式. 简单的 ...
- 如何使用JQ封装轮播图 实现自动轮播、点击切换等效果..
css部分: *{margin: 0;padding: 0;}#banner{width: 800px;height: 500px;margin: 30px auto;position: relati ...
- 案例——封装一个轮播图插件
说起插件,可能很多人搞不清楚插件和类库.组件.框架的区别,在这里,我先来简单的聊一聊它们之间的区别和联系 类库 提供一些真实项目中常用的方法,任何项目都可以把类库导入进来,调取里面的方法实现自己需要的 ...
- html文字图片一起轮播卡片,简单的堆叠卡片样式jQuery轮播图插件
MxSlider.js是一款堆叠卡片样式的jQuery响应式轮播图插件.该轮播图插件兼容IE8浏览器,采用响应式设计,它在图片切换时,就像一叠扑克牌将最上面一张挪开的效果. 使用方法 在页面中引入Mx ...
- html5移动端轮播图特效,支持移动端的纯js轮播图插件awesome-slider
awesome-slider是一款支持移动端的纯js轮播图插件.该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用. 使用方法 安装: /* y ...
- 一键生成轮播图，轮播图插件
一键生成轮播图,轮播图插件 简介 写练习的时候发现每次写轮播图都觉得很麻烦,突发奇想,何不写个轮播图插件,需要轮播图的时候,直接调用插件一键生成就行了!!! 于是乎,便写了以下代码(因为博主还是在校学 ...
- php 轮播图插件下载,jquery全屏响应式轮播图插件jquery.flexslider.js
在zblogPHP主题 yunduan 上使用这个轮播幻灯片插件jquery.flexslider.js,分享下使用方法: 这是一款jquery全屏响应式淡入淡出效果轮播图插件.该轮播图插件简单实用, ...
最新文章
- UIScrollView控件常用属性
- 自学编程成功概率有多少可能
- android gb2312 utf-8,不同编码页面之间用form传值出现乱码问题解决方案 utf-8 到 gb2312...
- linux ntp时间立即同步命令_记一次生产环境部署NTP服务及配置时间同步
- 背景se_盘点那些RPG手游中主角的背景故事，越悲情越强大
- Git 本地仓库与远程仓库链接
- thinkphp3.2.3漏洞_Chrome新版本修复CVE202015999 0 day漏洞
- janusgraph整合mysql_图解图库JanusGraph系列-一文知晓“图数据“底层存储结构
- 远程源已存在于“ git push”到新存储库中
- 磊科nw336+linux驱动程序,磊科NW336无线网卡驱动程序
- 【Codeforces Round #317 Div1 —— A】Lengthening Sticks【数学思维题】
- 关于虚拟机中的HWADDR和MACADDR地址
- Python实现主播人气排行榜，带你发现人气王
- Python grabcut 提取图像前景
- echarts绘制3D旋转地球
- Mavenir被以色列Partner选为下一代网络
- iView的table表格购物车的使用案例
- RIP动态路由配置 命令| 配置题
- js前端实现微信支付和支付宝支付
- VectorCAST/C++在汽车电子C++代码测试的应用
热门文章
- python 反传播_纯Python实现反向传播（BP算法）(5)
- 前端为什么有的接口明明是成功回调却执行了.catch失败回调_前端知识整理
- python字符串重复_【python】判断一个字符串是否包含重复字符？
- java 产生随机数_java生成随机数
- 32位jdk最大内存_Java安装之JDK下载篇
- 两栏布局的5中实现方式
- python模式字符串_使用python进行字符串模式匹配
- linux ftp mysql_linux搭建ftp服务——未连接mysql数据库的做法
- android旋转缩放布局,Android学习笔记（一）：双指缩放及旋转计算
- java resource和,java_spring之Autowired与Resource差异解析