位置: 编程技术 - 正文

基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)(基于jQuery和Bootstrap的设计报告的参考文献)

编辑:rootadmin

推荐整理分享基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)(基于jQuery和Bootstrap的设计报告的参考文献),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:使用jquery实现的项目,基于jQuery和Bootstrap的设计报告的参考文献,使用jquery实现的项目,jquery教程与例子,基于jquery的框架有哪些,基于jquery的框架有哪些,基于jquery的框架有哪些,基于jquery的框架有哪些,内容如对您有帮助,希望把文章链接给更多的朋友!

内容滑动切换应用非常广,常见的有幻灯片焦点图、画廊切换等。随着WEB前端技术的广泛应用,内容滑动切换效果占据着web页面重要地位,因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程。

先给大家展示下效果图,感觉还不错请参数实现代码,具体效果如下所示:

效果展示 源码下载

本次教程分三个部分:

1、使用jQuery开发基本的内容滑动切换效果,

2、支持移动端触控自适应的内容滑动切换效果,

3、封装内容滑动切换效果jQuery插件。

本文讲解第一部分,后面两部分会在接下来的文章中陆续发布,敬请关注。

本文将结合实例实现内容滑动切换的基本效果,包括:

左右箭头切换

无限无缝滚动

圆点按钮切换

动画效果

基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)(基于jQuery和Bootstrap的设计报告的参考文献)

自动切换

HTML

首先准备HTML结构,整个滑动区域用#hwslider包裹,包括滑块内容,滑块使用ul li组织内容,滑块内容可以是图片、文字等任意HTML内容。#dots即圆点切换导航,由多个小圆点组成,对应滑块数量,一般位于滑动区域的下方。.arr则是由两个左右方向键组成。

CSS

使用CSS完成滑动区域各组件的布局,注意其中#hwslider需要设置position: relative以及宽度和高度,那么滑块#hwslider ul li设置position:absolute,默认只显示.active的滑块,超出尺寸部分将被隐藏。而圆点导航#dots和箭头导航.arr都要设置position: absolute,箭头导航默认不显示,当鼠标滑向滑块区域时才显示。再一个要注意的是#dots和.arr的z-index设置成2,即都应该显示在滑块上面。您可以修改css样式以满足各种需求,请看以下代码:

jQuery

我们使用jQuery来实现滑动切换的各种效果,首先我们引入百度CDN提供的jQuery库和hwslider.js。

接着我们在hwslider.js中预先定义变量参数:

以上定义了各种需要的变量,其中clickable用于限制点击滑块动画,因为滑块滑动过程需要时间完成,如果连续点击箭头的话,正常情况如果不限制点击,则会在滑动动画未完成的情况下又进行下一个滑动动画,这样可能会导致页面卡住的情况。

接下来我们来写移动动画函数moveTo()。接受两个参数,index即要滑动的目标滑块,dir是滑动方向,有next和prev。我们实现滑动动画的原理是,当前滑块向左或向右移动的距离刚好是滑块的宽度,我们把这个宽度看作可视区,滑动时,当前滑块会向左或向右移出可视区,而紧接着下一个滑块从左或从右侧进入可视区。我们使用jQuery的animate()方法实现动画效果,两个滑块的运动速度speed保持一致,就实现了无缝滚动的效果。另外当滑动完成时,及时变换圆点切换的样式。

绑定左右箭头的点击事件,当点击箭头时,判断当前滑块是否是第一个滑块或最后一个滑块,并重新定义index,从而实现无线滚动效果,然后分别调用moveTo()函数,实现滑动动画效果。

接着,绑定圆点导航的点击事件,当点击小圆点时,获取当前点击的圆点序号,即点击的是第几个圆点,就对应的第几个滑块,然后调用moveTo()完成切换动画。

自动切换,首先我们要定义一个定时器,每隔一定的时间setInterval执行play(),play()每执行一次就会变化index参数,调用moveTo实现切换效果。最后当鼠标滑上滑块时清除定时器timer,鼠标移开滑块时又重新启动定时器自动切换。

最后将代码整理后,你将可以看到一个基本的滑动切换效果,你也可以下载源码测试。

为了让我们的滑动切换效果应用到移动端,我们在下一篇文章中会具体介绍移动端的自适应屏幕以及手势滑动滑块效果,敬请关注。

以上所述是小编给大家介绍的基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对积木网网站的支持!

jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二) 今天我们继续内容滑动切换效果的第二部分讲解。如今我们的web开发都要适应移动设备,就是说我们的web页面要在移动设备如手机端也能正常访问,所

jQuery UI结合Ajax创建可定制的Web界面 如今,网站比以往更具可定制性,允许用户更改其空间,根据自己的喜好对其进行个性化。个性化的主页或仪表板页面(例如iGoogle、MyYahoo!和MyAOL)日渐

浅谈jquery中的each方法$.each、this.each、$.fn.each jquery.each方法方法一$("img").each(function(i,elem){//i下标从零开始,//elem==this//$(elem).toggleClass("example");$(this).toggleClass("example");});方法二$.each([1,2,3,4],function(){//$

标签: 基于jQuery和Bootstrap的设计报告的参考文献

本文链接地址:https://www.jiuchutong.com/biancheng/385881.html 转载请保留说明!

上一篇:浅析jQuery Ajax通用js封装

下一篇:jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)(jquery.handleerror)

  • 房地产开发企业预缴增值税
  • 上个季度财务报表已申报,可以更正吗
  • 货物和运费一起开票怎么开
  • 支付境外软件服务怎么用
  • 增值税即征即退收入要交企业所得税吗
  • 个体工商户增值税怎么计算
  • 单位车辆折旧完怎么处理
  • 半成品原材料报废会计处理怎么做?
  • 房地产结转收入是什么意思
  • 进项发票税点属于什么科目?
  • 快递增值税税率
  • 主营业务税金及附加包括增值税吗
  • 固定资产丢失收据怎么写
  • 企业清算企业所得税税率
  • 报税报错了怎么办?
  • 企业预算报表如何做
  • 往来款项分为哪两类
  • 财会报告需要哪些证书
  • 原材料入库如何分类
  • 有关于秋天的诗句
  • 开机默认开启数字键
  • 研发支出和研发费用是一个吗
  • 季度所得税计算方法
  • 公司股权变更要换营业执照吗
  • 如何在excel中运算
  • php删除用户
  • 默认网关不可用的解决办法
  • 营业外收入账户贷方登记企业发生的各项营业外收入
  • 债劵利息怎么计算
  • ros call
  • php删除语句
  • 前端数据加密的三种方式
  • php curl_exec
  • 关于持股平台的法律法规
  • 折扣销售增值税计算例题
  • 异地预缴印花税怎么做账
  • 单位出租厂房需交税吗
  • 网上申报纳税注销流程
  • mysql备份数据
  • mongodb如何备份
  • 交易性金融资产的账务处理
  • 小规模纳税人的条件
  • 印花税根据一个月的销售额来计提吗
  • 工会里的钱
  • 收到投资款如何做税务登记
  • 公司汽车购置税怎么交
  • 制造费用分配结转表
  • 计提盈余公积比例
  • mysql密码忘了怎么办?
  • 安装软件提示windows 无法访问指定设备,路径或文件
  • Win10应用商店下载错误
  • windows xp运行
  • 苹果mac怎么下载英雄联盟
  • 复制粘贴报错
  • VMware10安装Windows server2012
  • win7系统怎么给软件打开摄像头权限
  • ubuntu无线网卡驱动离线安装
  • 五种修改方法
  • rtos用什么语言
  • 怎么创建windows虚拟机
  • win8的显示设置
  • unix2dos命令
  • win7怎么录屏为什么不是视频
  • win10标准用户权限
  • cocos2d官网
  • opengl纹理贴图正方体六个面
  • node.js的流的作用
  • perl读取文件内容逐行处理
  • 详解16型人格
  • jquery-easyui
  • shell操作
  • bootstrap制作的网站页面
  • android设置hint颜色
  • 安卓系统引导程序
  • jquery去重复数组
  • jquery 插件编写
  • 南京地税局局长名单
  • 怎么打印电子社保
  • 12366的客服辛苦吗
  • 苏30参数
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设