▓▓▓▓▓▓ 大致介绍

  看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了

  如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解;或者你和我一样学习jQuery不久,那你可以看看我的jQuery小案例(持续更新),互相学习!

  预览:优酷首页轮播图

▓▓▓▓▓▓ 思路

  思路其实非常简单,就是当点击图片下面的圆点或者图片两边的箭头时,让想要看到的图片走到它的位置,然后当前的图片和想要看到的图片按照一个方向运动就可以了

  例如:我们点击第五个小圆点,让第五个图片跑到当前图片的后面,然后一起向左运动

  

  当然了,如果你想要看前面的图片,让图片先跑到当前图片的左边,然后和当前图片一起向右运动

▓▓▓▓▓▓ 基本结构与样式

  

 

  然后我们用jQuery来设置初始图片的位置和小圆点的位置

▓▓▓▓▓▓ 自动轮播

  先来看看定义的全局变量

  

  设置nowPic是为了记录当前显示的图片,因为这个轮播图一共有三种触发图片切换的方法,所以这个变量是三个方法要共享的

  设置canClick变量是为了防止用户在图片切换动画效果还未完成的时候在进行点击

▓▓▓▓▓▓ 点击小圆点

  图片切换的方法都是一样的但是要注意,当点击小圆点时要清楚图片自动切换的定时器,在图片切换完成后,在设置自动切换的定时器

▓▓▓▓▓▓ 点击箭头

  当点击箭头时,我们为了防止用户多次连续的点击,所以设置了canClick这个全局变量,当点击了箭头时,要首先判断是否有为完成的动画即 canClick是否为true,如果为true,就将canCilck设置为false,防止再次点击箭头,然后进行图片切换的动画,同样不要忘了清楚 定时器,最后当切换图片的动画完成时,animate()方法的回调函数执行,将canClick设置为true

▓▓▓▓▓▓ 总结

  这个效果实现起来很简单,就是刚开始没有想到实现的思路(笨)。

转自http://www.cnblogs.com/qqandfqr/p/6262692.html

关于用jQuery知识来实现优酷首页轮播图!的更多相关文章

  1. 用jQuery实现优酷首页轮播图

    ▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...

  2. 【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析

    这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果, 可以在线预览效果:https://vip.52tech.tech/ 目前项目代码已经全部开源:项目地址:https:/ ...

  3. Jquery Mobile实例--利用优酷JSON接口读取视频数据

    本文将介绍,如何利用JqueryMobile调用优酷API JSON接口显示视频数据. (1)注册用户接口. 首页,到 http://open.youku.com 注册一个账户,并通过验证.然后找到A ...

  4. jquery的fadeTo方法的淡入淡出轮播图插件

    由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...

  5. 转:大气炫酷焦点轮播图js特效

    使用方法 Step 1. 在html的标签内引入相关文件 <script type="text/javascript" src="js/myfocus-2.0.0. ...

  6. jQuery的fadeIn和fadeOut实现的轮播图

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. vue 写一个炫酷的轮播图

    效果如上图: 原理: 1.利用css 的 transform 和一些其他的属性,先选五张将图片位置拍列好,剩余的隐藏 2.利用 js 动态切换类名,达到切换效果 css代码如下 .swiper-cer ...

  8. 3d轮播图——类似酷狗的轮播

    说到轮播图,其实只要是跟web开发相关的无论是前端后端应该都不陌生,各种各样的轮播图,从以前的单纯的平面山水画遮盖滑动或滚动,到Jquery的animate甚至是h5+css3,各种炫酷的轮播图更是层 ...

  9. react-native绑定优酷SDK播放视频-附效果和git源码

    ReactNative绑定优酷SDK需要用到两部分知识: 优酷本身的sdk绑定: RN与原生界面的交互: 效果: RN版本:0.49.3 代码更新日期:2017.10.26 下文也根据绑定优酷需要的两 ...

随机推荐

  1. Linux Bash环境下单引(')、双引号(")、反引号(`)、反斜杠(\)的小结

    在bash中,$.*.?.[.].’.”.`.\.有特殊的含义.类似于编译器的预编译过程,bash在扫描命令行的过程中,会在文本层次上,优先解释所有的特殊字符,之后对转换完成的新命令行,进行内核的系统 ...

  2. LVS高可用集群

    高可用LVS 集群构建 在LVS集群当中Director的作用是很关键的,所以我们在生产环境中要保证其高可用. 高可用架构图: 1.通过 piranha搭建LVS高可用性集群 piranha是REDH ...

  3. Fedora 21 设置开机启动脚本

    sudo touch /etc/rc.d/rc.localsudo vim /etc/rc.d/rc.local 在/etc/rc.d/rc.local文件中写入, 然后使用:wq命令 保存并退出. ...

  4. mysql 中执行的 sql 注意字段之间的反向引号和单引号

    如下的数据表 create table `test`( `id` int(11) not null auto_increment primary key, `user` varchar(100) no ...

  5. jquery 只有二级下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 《JavaScript高级程序设计 第3版》-学习笔记-2

    P31-P82页 1.相等不相等与全等不全等 相等不相等:先转换后比较.对于只有一个对象,调用valueOf方法得到基本类型值再按基本类型转换:如果两个都是对象,则比较他们是否是同一个对象(引用或指针 ...

  7. jquery roundabout幻灯片插件3d图片切换支持图片旋转切换滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. ARM的STRB和LDRB指令分析

    一.SDRAM 1.存储结构 SDRAM的内部是一个存储阵列.阵列就如同表格一样,将数据“填”进去.在数据读写时和表格的检索原理一样,先指定一个行(Row),再指定一个列 (Column),我们就可以 ...

  9. onethink

    http://document.onethink.cn/manual_1_0.html#onethink_usehelp_index

  10. PendingIntent的Flags

    PendingIntent是一个Intent的描述.包装,给予了这个PendingIntent 的组件在指定的事件发生或指定的时间到达时启动Activty.Service或者Broadcast. 根据 ...