最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery实现轮播图及其原理详解
时间:2018-08-23 编辑:猪哥 来源:一聚教程网
效果图:
原理:
页面结构方面:
将轮播图容器设置成相对定位,宽度设置成图片的宽度;容器中分为四部分:轮播的图片;点击的小按钮;前一张;后一张
样式方面:
- 轮播图容器为相对定位,宽度/高度设置成图片的宽度/高度,设置overflow为hidden;
- 容器中的每一部分都设置成绝对定位,放到相应的位置;
- 轮播图片的容器宽度设置成所有图片的宽度和,left开始先设置为0;
- 每张图片宽度一样,都设成左浮动,左右图片都在一行排列,所以轮播图的实质是装有图片的容器的移动,每次移动的距离为一张图片的宽度,这样每次就只显示一张图片;
-
前一张/后一张设置成display为none,当鼠标移入总容器时,再设置成display为block
功能方面:
自动轮播为一个定时循环机制setInteval,鼠标移入,循环停止,移除循环继续;
-
上一个: chosen实现省市区三级联动
-
下一个: Vue登录注册并保持登录状态的方法
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28