海创软件组–20200809–模拟form表单使用post发送请求+form表单提交取消页面跳转+jQuery轮播图

模拟form表单使用post发送请求

form表单提交取消页面跳转

jQuery书写的轮播图

当我没有设置.container的overflow: hidden;//所有图片显示,设置之后只显示一张

自动播放与点击前进、后退翻页
这三个事件其实都可以使用一个函数来表达,nextPage(true)、nextPage(false),true的话往前翻页,false往后翻页。自动播放是使用nextPage(true),让它一直自动向前播放,(并且点击前进后退按钮之后,播放暂停按钮的样式会变成暂停的样式,自动轮播停止)
p a g e L e f t 就 是 图 片 移 动 的 l e f t , 就 是 u l 的 l e f t , t r u e 与 f a l s e 来 判 断 图 片 的 pageLeft就是图片移动的left,就是ul的left,true与false来判断图片的 pageLeftleftullefttruefalsepageLeft是+400px(一张图片的宽度),还是-400px,然后更新ul的left,然它前进后退翻页

此时还有一个需要注意的点
当图片播放到最后一张的时候,它是跟第一张图片一样的,此时的left会跳转到第一张,同时第五张图片也是一样的

导航点随着图片移动切换样式

也是借助变量来更新状态

所有js代码

声明:本站部分文章及图片源自用户投稿,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2020年7月8日
下一篇 2020年7月8日

相关推荐