JQ无限轮播
来源:互联网 发布:遗传算法原理及其应用 编辑:程序博客网 时间:2024/05/16 17:13
今天我们要写4张图片的无限轮播图,效果如图:
既然要用JQ写,当然首先要引入JQ了
<scriptsrc="js/jquery-2.2.4.min.js" type="text/javascript"charset="utf-8"></script>
然后让我们进入html布局中
看到html后,有没有疑问:为什么说是4张轮播图,给了5张图片,而且第一张图片和最后一张一样
那就要讲一下,我的思路了,如果走完最后一张切再换到切换到第一张,会有一张空白,若直接切换到第一张,则没有滑动效果,所以在图片的后面多加了一张第一张图,当走完最后一张时,那一段空白就会被多添加的最后一张填满,切换到第一张,在视觉上是最后一张切换到第一张实际是,最后一张添加的图片走完后,才切换到第一张
css部分我们就不说了,直接跳到js部分吧
先说一下,图片向右轮播的函数:
var n =0;
当第一张开始走的时候,第二个导航圆圈开始变色,同理,当第四个图片开始走的时候,第一个导航圆圈开始变色,当到第五张图片时,切换到第一张图片。animate()函数时JQ自定义动画
图片向左轮播函数
当是第一张时,切换到最后一张
给导航圆圈添加移入事件:
之所以n++,是因为调用了向左滑动的函数,向左滑动的函数,首先n++了
阅读全文
0 0
- JQ无限轮播
- 用jq实现无限轮播
- jq实现轮播
- JQ实现轮播
- viewpager无限轮播
- 无限轮播加点
- Viewpager无限轮播
- 无限轮播
- 图片无限轮播
- 无限轮播
- Viewpager无限轮播
- ViewPager无限轮播
- 无限轮播
- 无限轮播
- 无限轮播
- 无限轮播
- ViewPager无限轮播
- 无限轮播
- 编程题(之字形打印矩阵)
- 算法与数学
- PMP 第七章 项目成本管理
- 【Thrift】Mac 安装
- HDU
- JQ无限轮播
- PMP 第6章项目时间管理
- Java集合总结(一)
- 第一个QT程序
- 安装composer失败
- Java中读取文件路径总结
- 圣杯布局和双飞翼布局
- Hadoop单节点示例搭建
- 爬取京东商品详情页信息