关于用jQuery知识来实现优酷首页轮播图!
看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了
如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解;或者你和我一样学习jQuery不久,那你可以看看我的jQuery小案例(持续更新),互相学习!
预览:优酷首页轮播图
▓▓▓▓▓▓ 思路
思路其实非常简单,就是当点击图片下面的圆点或者图片两边的箭头时,让想要看到的图片走到它的位置,然后当前的图片和想要看到的图片按照一个方向运动就可以了
例如:我们点击第五个小圆点,让第五个图片跑到当前图片的后面,然后一起向左运动
当然了,如果你想要看前面的图片,让图片先跑到当前图片的左边,然后和当前图片一起向右运动
▓▓▓▓▓▓ 基本结构与样式
然后我们用jQuery来设置初始图片的位置和小圆点的位置
▓▓▓▓▓▓ 自动轮播
先来看看定义的全局变量
设置nowPic是为了记录当前显示的图片,因为这个轮播图一共有三种触发图片切换的方法,所以这个变量是三个方法要共享的
设置canClick变量是为了防止用户在图片切换动画效果还未完成的时候在进行点击
▓▓▓▓▓▓ 点击小圆点
图片切换的方法都是一样的但是要注意,当点击小圆点时要清楚图片自动切换的定时器,在图片切换完成后,在设置自动切换的定时器
▓▓▓▓▓▓ 点击箭头
当点击箭头时,我们为了防止用户多次连续的点击,所以设置了canClick这个全局变量,当点击了箭头时,要首先判断是否有为完成的动画即 canClick是否为true,如果为true,就将canCilck设置为false,防止再次点击箭头,然后进行图片切换的动画,同样不要忘了清楚 定时器,最后当切换图片的动画完成时,animate()方法的回调函数执行,将canClick设置为true
▓▓▓▓▓▓ 总结
这个效果实现起来很简单,就是刚开始没有想到实现的思路(笨)。
关于用jQuery知识来实现优酷首页轮播图!的更多相关文章
- 用jQuery实现优酷首页轮播图
▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...
- 【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析
这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果, 可以在线预览效果:https://vip.52tech.tech/ 目前项目代码已经全部开源:项目地址:https:/ ...
- Jquery Mobile实例--利用优酷JSON接口读取视频数据
本文将介绍,如何利用JqueryMobile调用优酷API JSON接口显示视频数据. (1)注册用户接口. 首页,到 http://open.youku.com 注册一个账户,并通过验证.然后找到A ...
- jquery的fadeTo方法的淡入淡出轮播图插件
由于对基于jquery的简单插件开发有了一定的了解,慢慢的也对基于jquery的插件开发有了兴趣,在上班结束之后就研究各种插件的思路逻辑.最近开发了一款基于jquery的fadeTo方法的轮播图插件, ...
- 转:大气炫酷焦点轮播图js特效
使用方法 Step 1. 在html的标签内引入相关文件 <script type="text/javascript" src="js/myfocus-2.0.0. ...
- jQuery的fadeIn和fadeOut实现的轮播图
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- vue 写一个炫酷的轮播图
效果如上图: 原理: 1.利用css 的 transform 和一些其他的属性,先选五张将图片位置拍列好,剩余的隐藏 2.利用 js 动态切换类名,达到切换效果 css代码如下 .swiper-cer ...
- 3d轮播图——类似酷狗的轮播
说到轮播图,其实只要是跟web开发相关的无论是前端后端应该都不陌生,各种各样的轮播图,从以前的单纯的平面山水画遮盖滑动或滚动,到Jquery的animate甚至是h5+css3,各种炫酷的轮播图更是层 ...
- react-native绑定优酷SDK播放视频-附效果和git源码
ReactNative绑定优酷SDK需要用到两部分知识: 优酷本身的sdk绑定: RN与原生界面的交互: 效果: RN版本:0.49.3 代码更新日期:2017.10.26 下文也根据绑定优酷需要的两 ...
随机推荐
- Apache Virtual Include
2.目录支持includes: <Directory /> Options None //不支持includes ...
- 简易的highcharts公共绘图模块封装--基于.net mvc
运行效果: 之所以选择这个图表插件,是因为它较其他同类插件轻量且中文文档详细完整,Demo丰富,配置使用简单.具体内容请登录中文官网:http://www.hcharts.cn/ 项目详细: 项目环境 ...
- 谈memcache和memcached的区别
用了段时间的memcache和memcached总结下认识,看很多人在用cache的时候,刚刚都没有搞清楚memcache 和 memcached的区别,还有就是使用的时候基本都是 get/set ...
- phpcms安装完成后总是跳转到install/install.php
很多人在本地安装phpcms后总是跳转到install/install.php.由于很多人是第一次使用phpcms,不知道为何会出现这个错误.出现这个大都是phpcms的缓存所致. 如何解决ph ...
- Opencv实现的简易绘图工具
第一次写博,还是个菜鸟.最近开始学习Opencv,试着写了个简易的绘图工具(目前只写了画线和橡皮擦部分,画其它图形还有待往里添加),也算是记录自己的学习之路. #include "stdaf ...
- Ogre内部渲染流程分析系列
come from:http://blog.csdn.net/weiqubo/article/details/6956005 要理解OGRE引擎,就要理解其中占很重要位置的 Renderable接口, ...
- id类型
id类型 在Objective-C 中,id 类型是一个独特的数据类型.在概念上,类似Java 的Object 类,可以转换为任何数据类型.换句话说,id 类型的变量可以存放任何数据类型的对象.在内部 ...
- JS获取终端屏幕、浏览窗口的相关信息
查看终端屏幕相关信息,在windows系统的控制面板可以查到分辨率且可以设置,更具体的浏览器可视窗口等信息则需要借助其他工具.而在程序里需要动态获取时该怎么做呢? 琢磨的一个js方法,供大家参考.如下 ...
- TCP三次握手和http过程
pc浏览服务器网页此过程不包括域名查询,只描述TCP与http数据流的变化.一.pc与http服务器进行三次握手来建立连接.1.pc:seq=0 ack=0 syn=1 ack=0 发送给服务器建立同 ...
- Shoot the Bullet
zoj3229:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=3442 题意:一个摄影师,在n天内给m个女神拍照.每个女神至少要 ...