我有两种方式让你学会轮播图

单先生
单先生 发布于 5 天前 浏览:1840 类型:原创 - 教程 分类:JavaScript - JavaScript 二维码: 作者原创 版权保护
大家好!我们又见面了。 今天给大家讲讲常用的轮播图是怎么实现的。 废话不多说,直接上图! 代码在博文底部,好多图要传,我就放弃了。你们直接看代码吧

我有两种方式让你学会轮播图
1.首先就是布局,我们首先创建一个box相对定位,box中在放一个ul标签要绝对定位。这就是基本的界面搭建,按照下图中将ul标签中的li标签拼接好;
我有两种方式让你学会轮播图

2.搭建完毕后,我们先让它滑动起来,这个滑动就是用匀速动画就可以了,不懂匀速动画的看我的笔记,里面清楚的讲解了匀速动画。

2.1动画算是移动起来了,那我们就加入一个定时器来定时调用迅速动画来实现一下翻书的效果就可以了

我有两种方式让你学会轮播图
3.实现无缝连接,这个是轮播图的核心。很简单,因为第一张和最后一张是一样一样的!吼~。当我们的ul滑动到最后一张的时候,那我们就迅速将ul的位置回到初始位置。这样就掩人耳目了。
如图:

我有两种方式让你学会轮播图

3.1核心代码,为了知道滑动到第几个图片,你要用一个索引值来记录当前滑动到第几个图片了
 function  autoPlay() {
                pageIndex++;
                if (pageIndex>$('li').length-1){ //当滑东到最后一张
                    pageIndex = 1;
                    showList.css('left',0);//当滑东到最后一张。将ul设置为初始位置
                }
                showList.animate({left:listItemWitdh*pageIndex},speed);//继续执行动画
            }


以上是第一种做法

现在讲解第二种做法:
我有两种方式让你学会轮播图

废话不多说,先上图:
1.第一步也是先布局,同样需要一个大盒子box,和一个ul盒子相对定位,li标签绝对定位。注意哦!是ul标签相对定位,li标签绝对定位哦。
1.1如下图所示,ul盒子是box的两倍大


我有两种方式让你学会轮播图
2.接下来就是布局,默认让第一张li展示在box中,其他li标签集体右移到box右边位置
我有两种方式让你学会轮播图

3.注意听了。这布最重要,否则你就不会了。正常步骤,第一张图移动,第二张图跟着移动,第二张图移动之前,先让它放在第一张图屁股后面。
我有两种方式让你学会轮播图
 var autoPaly =  function () {
               //第一张图先移动到左边
                listItems.eq(currentIndex).animate({left:-elemWidth},300);
                ++currentIndex;//索引累加
                if (currentIndex > (listItems.length-1)){
                    currentIndex = 0;
                }
                indrectorIndex(currentIndex);
                //现在开始第二张,首先设置left在正确位置,动画是移动到left为0位置
                listItems.eq(currentIndex).css({left:elemWidth}).animate({left:0},300);
            }



4.会了左边,那右边就好搞了,同理可证
我有两种方式让你学会轮播图

代码
代码.zip836.91 KB
标签:
z
给个赞 35 人点赞
收藏 62 人收藏
评论 已有 16 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
单先生
单先生昨天 09:0716F
就是两种实现方式,效果肯定是一样的 //@Atom_L:效果感觉差不多,但是第二种真的见识了emoticon,先下载保存了emoticon
举报 支持 (0) 回复 (0)
Atom_L
Atom_L昨天 00:0415F
效果感觉差不多,但是第二种真的见识了emoticon,先下载保存了emoticon
举报 支持 (0) 回复 (1)
单先生
单先生4 天前14F
。。。 //@陈陈陈大文:可我还是不懂。。。
举报 支持 (0) 回复 (0)
陈陈陈大文
陈陈陈大文4 天前13F
可我还是不懂。。。
举报 支持 (0) 回复 (1)
单先生
单先生4 天前12F
对对对。我忘记用的jQuery了emoticon //@Pawn:stop().animate() //@林中小树:连续点击的bug如何解决
举报 支持 (0) 回复 (0)
Pawn
Pawn4 天前11F
stop().animate() //@林中小树:连续点击的bug如何解决
举报 支持 (0) 回复 (1)
单先生
单先生4 天前10F
节流。等动画结束了,再让它点击。如果不懂的话。可以私信我。 //@林中小树:连续点击的bug如何解决
举报 支持 (0) 回复 (0)
林中小树
林中小树4 天前9F
连续点击的bug如何解决
举报 支持 (0) 回复 (2)
荆蛋
荆蛋4 天前8F
楼主太搞笑了,明明是个萌妹子,居然起个男生的名字.我要曝楼主的照片了
举报 支持 (0) 回复 (0)
单先生
单先生4 天前7F
emoticon通假字 //@小杨光2015:就是错别字有点多
举报 支持 (0) 回复 (0)
小杨光2015
小杨光20154 天前6F
就是错别字有点多
举报 支持 (0) 回复 (1)
hbxywdk
hbxywdk5 天前5F
emoticon
举报 支持 (0) 回复 (0)
她让我换网名
厉害
举报 支持 (0) 回复 (0)
单先生
单先生5 天前3F
代码在博文下面。你自己下载 //@Mengxuan01:没有完整代码?发我一份1549414730@qq.com 研究研究
举报 支持 (0) 回复 (0)
Mengxuan01
Mengxuan015 天前2F
没有完整代码?发我一份1549414730@qq.com 研究研究
举报 支持 (0) 回复 (1)
单先生 单先生 作者

行有不得,反求诸己。

作者最新