资讯专栏INFORMATION COLUMN

用 jQuery 做个轮播

cheukyin / 2676人阅读

摘要:初次体验之后,体验一下强大之处,做一个简单的轮播,实现图片切换。点击按钮切换轮播页面上面有三个标签用两个便签包裹好,是用来布局的,一般不在布局的标签上面做任何操作,是用来做轮播窗口的。是一个整数,指示元素的位置,以为基数。

初次体验jQuery 之后,体验一下jQuery强大之处,做一个简单的轮播,实现图片切换。

点击按钮切换轮播

页面上面有三个img标签用两个div便签包裹好,class=images是用来布局的,一般不在布局的标签上面做任何操作,class=window是用来做轮播窗口的。三个button按钮,用于切换图片。

首先把图片一次排开,用class=images做布局,给它加上display:flex就可以实现浮动,如果图片浮动起来变形厉害,可以给它加上align-items:flex-start
class=window是轮播用的可视窗口,设置为图片的宽度;并加上overflow:hidden,隐藏超出可视窗口部分;
用JS 来控制CSS来实现图片切换,当我点击按钮,出现对应图片,当我点击第1张按钮按钮时,触发.on事件后执行后面的函数,把图片向左移动到指定位置,其余两个按钮也是做类似效果;

这样做你会发现切换图片太生硬了,这事我们可以加上一点动画过渡transtion:transform 0.5s,让它切换时平缓一点。

 //jQuery 文件

jQuery API 用法
.on()语法:.on( events, handler(eventObject) )
events类型是String,一个或多个空格分隔的事件,比如clickkeydown.myPlugin
handler(eventObject)类型是Function,事件被出发时执行函数

.css()用法:获取匹配元素集合中的第一个元素的样式属性的值设置每个匹配元素的一个或多个CSS属性

CSS样式:
display:flex; flex布局
align-items:flex-stare; 往侧轴起点靠
transition:transform 0.5s 动画过渡

样式行为分离

用上面的方法,有一个问题就是HTML 和CSS 分离了,但是CSS 和JS 没有分离,但是为什么img标签会有图片的宽度呢?

其实img是一个可替换元素,在img里面的下载下来之前,浏览器不知道img长什么样,所以需要先做一个占位符来占位,等图片下载下来时替换掉占位符,一旦页面下载错了就会看到占位符;如果不用这个占位符,浏览器就会随便找个占位符来占位,等图片下载下来后在替换这个占位符,在替换的过程中,后面的内容要让位置,这就是重排的过程,特别消耗CPU,所以图片的宽高很重要,知道图片宽高就要写上去。

如果做成CSS 和JS 分离,可以像下面这样写,就可以做到行为和样式分离:


但是这有一个问题,如果你页面有很多图片时,removeClass就会有很多,代码就没有那么整洁了,这个时候就最好还是用行为控制样式,因为没有办法部把所有的状态都写到JS 里面,所以只有用JS 动态生成CSS,所以不到万不得已最好不要用。

重复代码优化

用JS 控制样式的代码,可以改写一下,变得更简洁。

button标签外面在包裹一层div,如果用DOM 获取里面的button的顺序该怎么做呢?

var n; //n存储的是:p3是第几个元素 var allButtons = p3.parentNode.children; //先获取到p3的所有兄弟元素 for(var i = 0; i < allButton.length; i++){ //遍历这个数组 if(allButtons[i] === p3){ //如果这数组中的第i个等于p3,那么i 的值就是p3的位置 n = i+1; //因为i 取值是0,1,2 所以需要加上1才能得到最后的结果 break; //找到就跳出if循环; } }

如果不用jQuery,用DOM 提供的API 是要用6行代码才能实现。
那看看有jQuery 怎么做呢

jQuery API语法:
event.traget用户点击的那个按钮
event.currentTarget监听的那个按钮
index()从匹配的元素中搜索给定元素的索引值,从0开始计数。

用上面方法就可以把代码变的更简洁。

自动轮播

下面来看下,如果我要做成自动播放应该怎弄呢?
先来做一个数数的过程,每1s加1

var n = 0;
console.log(n);
setInteral(() => {
    n+=1;
    console.log(n);
},1000)

那如果我要实现0、1、2循环数数呢?

var n = 0;
console.log(n%3);   //用取余就可以
setInterval(()=>{
    n+=1;
    console.log(n%3);
},1000)

用它来做元素循环时不也很简单

循环播放
var n = 0;
var size = allButtons.length;   //有多少个按钮可以这样获取
allButton.eq(n%size).trigger("clcik");   //用DOM API 可以这样写parentNode.children[n%size],如果用jQuery 的话allButton[n%size]还是DOM 对象,这样的还要在封装,jQuery 提供了一个.eq()的方法
setInterval(()=>{
    n+=1;
    allButton.eq(n%size).trigger("clcik");
},1000)

jQuery API语法:
.eq(index)index是一个整数,指示元素的位置,以0为基数。
.trigger(eventType [, extraParameters ]) eventType类型是String,包含JS事件的字符串,比如clicksubmit

这样就可以实现自动轮播了,美中不足的是按钮变化我们看不见,那把按钮添加class看看


var n = 0;
var size = allButtons.length;
allButtons.eq(n%size).trigger("click").addClass("red");
var timerId = setInterval(function(){
    n+=1;
    allButtons.eq(n%size).trigger("click").addClass("red").siblings(".red").removeClass("red");   //siblings(".red").removeClass("red")获取当前元素的兄弟元素,删除它的class
})

jQuery API语法:
.siblings( [selector ] )类型是Selector,可以获取每个元素的兄弟元素

现在可以看到每张图片轮流播放,按钮颜色也随着改变。

进入或离开轮播窗口也能播放

但是现在有一个问题,当我鼠标进入轮播页面,它不能停止播放,那下面来看看怎么实现

$(".window").on("mouseenter",function(){
    window.clearsetInterval(timerId)    //当鼠标进入"class=window"窗口时,触发清除延时执行函数
})
$(".window").on("mouseleave",function(){
    timerId = setInterval(function(){
        allButtons.eq(n%size).trigger("click").addClass("red").siblings(".red").removerClass("red");  //当鼠标离开"class=window"窗口时,继续执行上面的延时执行函数
    },1000)
})

.mouseenter( handler(eventObject) )类型是Function,当鼠标进入触发函数
.mouseleave( handler(eventObject) )类型是Function,当鼠标离开进入触发函数

修复一个小bug

这里面有一个小bug,轮播的 trigger("click")时间和.on("click")产生了冲突。在for循环中.on("click")的最后加上

n = index;
allButtons.eq(n).addClass("red").siblings(".red").removeClass("red");

如下:

var allButtons = $("#buttons > button");
for(var i = 0; i < allButtons.length; i++){
    $(allButtons[i]).on("click",function(x){
        var index = $(x.currentTarget).index();
        var p = index * -279;
        $(images1).css({
            transform:"translate("+ p + "px)"
        });
        n = index;
        allButtons.eq(n).addClass("red").siblings(".red").removeClass("red");
    })
}
整理代码

整理下刚刚写的自动轮播的代码

 //jQuery 文件

优化代码

刚刚写的自动轮播部分,有很多重复的代码,将它们优化一下

 //jQuery 文件

用到的jQuery API

最后整理下这里面用到的jQuery API

.on()语法:.on( events, handler(eventObject) )

events类型是String,一个或多个空格分隔的事件,比如clickkeydown.myPlugin

handler(eventObject)类型是Function,事件被出发时执行函数

.css()用法:获取匹配元素集合中的第一个元素的样式属性的值设置每个匹配元素的一个或多个CSS属性

event.traget用户点击的那个按

event.currentTarget监听的那个按钮

index()从匹配的元素中搜索给定元素的索引值,从0开始计数。

.eq(index)index是一个整数,指示元素的位置,以0为基数。

.trigger(eventType [, extraParameters ]) eventType类型是String,包含JS事件的字符串,比如clicksubmit

.siblings( [selector ] )类型是Selector,可以获取每个元素的兄弟元素

总结

轮播所用的图片一字排开,通过移动位置,把相应的图片呈现在视窗上。
自动轮播的关键是循环,只要会自然计数方法就能掌握其中的道理。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/95114.html

相关文章

  • 小白成长日记:一步一步写个轮播图插件

    摘要:并不是所有人写的代码或者插件都适合小白使用,比如这是一个的滚动插件,大多数人使用了之后发现滚动不了,去作者提,其实是他们并不懂滚动的原理。 最近在这里看了一篇关于面试的文章《回顾自己三次失败的面试经历》,作者三次倒在了轮播图上。囧,所以我也写个轮播图看看。这次是用jQuery写的,因为最近一直在研究jQuery插件的写法,所以用jQuery写的,而且我发现,我vue用太多,完全不熟悉d...

    notebin 评论0 收藏0
  • 回顾自己三次失败的面试经历

    摘要:站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历,依然是与轮播图有关。当然,这次思特奇面试之旅,最后也是以失败告终,这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两...

    DC_er 评论0 收藏0
  • 回顾自己三次失败的面试经历

    摘要:站在这个时间点上,我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历,依然是与轮播图有关。当然,这次思特奇面试之旅,最后也是以失败告终,这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言 时间的齿轮已经来到了2017年的11月份,距离2018年仅仅还剩下不到两...

    spacewander 评论0 收藏0
  • jquery插件【轮播图】历程

    摘要:轮播图插件的任务已经接近尾声,在书写轮播图期间确实有一些小的感触的。 轮播图插件的任务已经接近尾声,在书写轮播图期间确实有一些小的感触的。感兴趣的可以访问我的轮播图的线上地址:轮播图 首先,轮播图插件其实并不是我第一次写,之前也写过,不过那时候是按照别人的思路写下来的,算起来大概有一年了,这次又一次开始轮播图是因为拜读了《单页面Web应用 JavaScript从前端到后端》的这本书的1...

    khlbat 评论0 收藏0

发表评论

0条评论

cheukyin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<