位置: 编程技术 - 正文

基于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)

  • 从香港向境外汇款怎么汇
  • 印花税税源明细表怎么填
  • 残保金滞纳金能抵扣吗
  • 注销公司账面余额要全部清零吗
  • 汇算清缴交了税怎么做分录
  • 计提坏账又收回
  • 外商投资企业如何注资
  • 短期筹资方式有没有股票
  • 三包范围内的维修费谁出
  • 房租物业费摊销
  • 城镇土地使用税纳税义务发生时间
  • 网银年费属于财务费用哪一项
  • 一次性发20万元个税如何算
  • 上月开票次月开红票销项税额有什么影响?
  • 发票密码区出来了一些
  • 企业银行密码器
  • 外贸企业出口货物会计账务处理
  • 什么是销售利润率和成本利润率
  • 发票红冲作废是什么意思
  • 公司注销报表怎么调
  • 银行存款账不平怎么办
  • 应付款项余额
  • 小企业会计准则和一般企业会计准则的区别
  • 一般纳税人怎么算税
  • 航空公司收取什么费
  • php是面向过程还是面向对象
  • 不起眼的暴利小生意农村
  • 开发企业房产税如何征收
  • 解聘员工补偿金能拖欠吗
  • 在途物资什么类科目
  • 销售商品的会计分录已收到钱
  • nodejs bull
  • php多条件搜索功能的实现
  • 物流费属于什么税收编码
  • 增值税密码锁定怎么办
  • 遍历队列中所有数据元素
  • 完美破费是什么意思
  • 开源 okr
  • 织梦系统基本参数
  • 全年一次性奖金并入或单独哪个好
  • 用友u8固定资产减少怎么撤销
  • 小额收据入账规则最新
  • 幼儿园园服已发给孩子怎么通知家长
  • 使用银行汇票的结算方式
  • 库存现金余额过大的风险
  • 所得税费用科目的期末余额应直接转入
  • 季度末需要结转本年利润吗
  • 返聘的退休人员需不需要缴纳社保
  • 税控盘清卡时间
  • 事业单位工会经费账务处理
  • 什么是备查账
  • mysql的优化有哪几种
  • sql server复制数据库的方法
  • mysql数据库内存缓存设置
  • 如何使用光盘做启动盘
  • win10动态磁贴不更新
  • ubuntu20.04升级21.04
  • windows英文字体
  • linux主机名是什么意思
  • oracle数据库网络配置工具
  • mac如何打印文件
  • windows7电脑怎么变快
  • 如何改变linux终端界面的颜色
  • win8 怎么样
  • linux在服务器领域的应用状况
  • linux中统计字符命令
  • win7怎么禁止程序自启动
  • win7系统和win8系统哪个好用
  • extjs 为某个事件设置拦截器
  • msoobe命令
  • android的ui组件有哪些
  • shell字符串比较相等
  • unity 3d场景2d角色
  • Unity的WWW类的用法整理
  • bootstrapped 5%
  • python二叉树的遍历算法
  • webpack循环引用
  • 安卓手机怎么自定义
  • 新中国税务历史
  • 2023居民医保怎么交
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设