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

单先生
单先生 发布于 2017-01-11 11:51:49 浏览:3143 类型:原创 - 教程 分类: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
给个赞 42 人点赞
收藏 78 人收藏
评论 已有 19 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
筠大大
筠大大2017-01-20 16:38:4219F
以前对这种总是有点蒙,现在好点了!!赞哦!!
举报 支持 (0) 回复 (0)
陈陈陈大文
陈陈陈大文2017-01-20 09:35:2118F
我能说我都不怎么用JS写效果的吗。。。。。 //@1379089794:第一种假图片思想适用于PC端,在移动端比较鸡肋。第二种方法是移动端常见的方法,也是三张图思想 //@陈陈陈大文:可我还是不懂。。。
举报 支持 (0) 回复 (0)
1379089794
13790897942017-01-20 08:37:2817F
第一种假图片思想适用于PC端,在移动端比较鸡肋。第二种方法是移动端常见的方法,也是三张图思想 //@陈陈陈大文:可我还是不懂。。。
举报 支持 (0) 回复 (1)
单先生
单先生2017-01-15 09:07:2616F
就是两种实现方式,效果肯定是一样的 //@Atom_L:效果感觉差不多,但是第二种真的见识了emoticon,先下载保存了emoticon
举报 支持 (0) 回复 (0)
Atom_L
Atom_L2017-01-15 00:04:0615F
效果感觉差不多,但是第二种真的见识了emoticon,先下载保存了emoticon
举报 支持 (0) 回复 (1)
单先生
单先生2017-01-12 21:45:2014F
。。。 //@陈陈陈大文:可我还是不懂。。。
举报 支持 (0) 回复 (0)
陈陈陈大文
陈陈陈大文2017-01-12 20:26:1913F
可我还是不懂。。。
举报 支持 (0) 回复 (2)
单先生
单先生2017-01-12 15:04:5612F
对对对。我忘记用的jQuery了emoticon //@Pawn:stop().animate() //@林中小树:连续点击的bug如何解决
举报 支持 (0) 回复 (0)
Pawn
Pawn2017-01-12 14:24:5111F
stop().animate() //@林中小树:连续点击的bug如何解决
举报 支持 (0) 回复 (1)
单先生
单先生2017-01-12 10:48:5810F
节流。等动画结束了,再让它点击。如果不懂的话。可以私信我。 //@林中小树:连续点击的bug如何解决
举报 支持 (0) 回复 (0)
林中小树
林中小树2017-01-12 10:10:029F
连续点击的bug如何解决
举报 支持 (0) 回复 (2)
荆蛋
荆蛋2017-01-12 10:09:518F
楼主太搞笑了,明明是个萌妹子,居然起个男生的名字.我要曝楼主的照片了
举报 支持 (0) 回复 (0)
单先生
单先生2017-01-12 08:40:407F
emoticon通假字 //@小杨光2015:就是错别字有点多
举报 支持 (0) 回复 (0)
小杨光2015
小杨光20152017-01-12 08:18:216F
就是错别字有点多
举报 支持 (0) 回复 (1)
hbxywdk
hbxywdk2017-01-11 20:13:395F
emoticon
举报 支持 (0) 回复 (0)
单先生 单先生 作者

行有不得,反求诸己。

作者最新