美文网首页
jQuery番外篇 - 自动轮播demo实现

jQuery番外篇 - 自动轮播demo实现

作者: YOJIN | 来源:发表于2018-08-09 23:18 被阅读0次

以下是用jQuery初步实现的轮播1.0效果,手动点击切图版,没有难点,做为笔记记录初学者需要遇到的一些值得注意的点:

1 2

一个有关页面优化的知识点:重排

3

1.网页加载 > 图片加载 > 加载过程中,如果图片未加载完或出现意外,就有占位符出现,直到图片加载完才会替换掉占位符;

2.如上图,如果图片2未加载完,图片3加载完,那图片3(W:400,H:300)就会向前占位 400px - 占位符宽度 ,直到图片2加载完,图片3就会往后挪动先前占位的距离,这个过程叫重排;

3.重排浪费性能,为了避免这种情况,采取的页面优化方案是:如果已知图片宽高,则添加样式,如:上图皆为400*300,则为其添加style:width=200px,height=300px

        所以一般默认图片加上宽高;


以下正式进入实现自动轮播的正题:

        Class、ID、样式先布局好,此次的主角是jQuery,其他的不多讲;

        首先,要明确一个概念,html排列结构,css决定样式,JS控制行为,结构样式行为分离的好处多多。当过多的将样式内联在 html 中,当代码量达到一定量时,代码就会显得臃肿难看,毫无层次感,所以至始至终要记得:简洁明了的代码才是好代码!

        轮播1.0效果中,图2 是用 JS 增删 class 达到控制 css 的效果,明确的样式行为分离,但是却存在了一个问题,如果轮播的图片过多,则样式的 position 也会跟着增加,就会使得代码繁杂,这时候就要打破只用JS控制行为的原则,转而用JS控制样式,用动态生成样式会更加合理,如此一来,哪怕图片再多也不需要调整样式了。

所以,通过JS实现动态控制样式的思路是:

0.获取所有按钮组成伪数组声明给allbutton;

1.遍历伪数组allbutton;

2.让伪数组allbutton变为jQuery对象,当点击伪数组allbutton其中的任意元素时,执行函数;              // jQuery API 要用 jQuery对象

3.用jQuery API获取被点击的元素在伪数组中的序号,并声明给index变量;

4.index变量的值为序号,是numbere,根据图片宽度计算出需要位移的像素,并声明给 p;

5.获取 images ID选择器,为其增添样式,变化位移根据步骤4得出;

在以上的基础下就开始进一步的实现自动轮播吧



页面链接:皮卡丘自动轮播 demo

相关文章

  • jQuery番外篇 - 自动轮播demo实现

    以下是用jQuery初步实现的轮播1.0效果,手动点击切图版,没有难点,做为笔记记录初学者需要遇到的一些值得注意的...

  • AACycleScrollView swift版本的无限轮播图

    项目地址:AACycleScrollView( Demo见项目地址) 实现效果:自动轮播,无限轮播 最新更新:支持...

  • 技术练习的demo集

    demo1 实现优酷轮播图效果 页面效果展示 功能:自动轮播,hover停止轮播,点击left/right上一页/...

  • web常用库

    js retina.js 实现retina屏幕图片自动替换 slick.js jQuery插件,实现各种轮播图 w...

  • swiper实现自动轮播的问题,不能跳转到第一个slide的解决

    ionic+swiper实现自动轮播在实现自动轮播的时候,请求回来的图片数据不能正常轮播,在每次轮播的时候总是会跳...

  • jquery代码实现爱奇艺轮播图效果

    爱奇艺轮播图效果的jquery代码实现。 html部分: css部分: jquery部分:

  • 用 jQuery 做个轮播

    初次体验jQuery 之后,体验一下jQuery强大之处,做一个简单的轮播,实现图片切换。 点击按钮切换轮播 页面...

  • 项目-轮播图

    整个轮播图分为三部分:轮播指标、轮播项目及轮播导航。用boostrap实现轮播图要比用js、jQuery方便的多,...

  • jQuery实现轮播

    一、轮播的实现原理 1.轮播是把需要轮播的图片浮动水平排列成一排。2.然后设置一个视窗,大小等于一张图片。3.视窗...

  • jQuery实现轮播

    题目1:轮播的实现原理是怎样的?如果让你来实现,你会抽象出哪些函数(or接口)供使用?(比如 play()) 布局...

网友评论

      本文标题:jQuery番外篇 - 自动轮播demo实现

      本文链接:https://www.haomeiwen.com/subject/nskhbftx.html