关于图片轮播的几种思路
图片轮播我们经常在众多网站中看到,各种轮播特效在有限的空间上展示了几倍于空间大小的内容,并且有着良好的视觉效果。很多初学js的小伙伴都会拿这个来练习。我也不例外,所以在此分享几个我写轮播图的过程,代码不足之处请多指教哦,相互学习。
好了,先来说第一种轮播特效:
就是通过修改每一张图片的透明度,让其每隔一段时间将其中的某一张图片透明度设为1,而其它的设为0,从而实现一种图片轮流播放的效果。
这种效果的思路比较简单,首先让一组图片绝对定位,让其重叠在一起,然后通过一个函数来控制图片的透明度变化。同时还有一个定时器,不停的除发这个函数,每次改变不同图片的透明度,让其显示。(更简单的效果是直接修改display属性,让该显示的图片display:block,而不显示的设为display:none就可以,只是效果上会差一些,但原理相同)
首先来看Html结构代码:
1 <ul id="pictures"> 2 <li><img src=""></li> 3 <li><img src=""></li> 4 <li><img src=""></li> 5 <li><img src=""></li> 6 </ul>
View Code
对其进行样式调整之后,图片都在同一个位置,可以先给第一张图片设置为显示,而其它的图片设为不显示。
下面来看js的代码:
1 /* 2 关于插件的一些说明: 3 parentID:是指父容器的id,最好是一个无序列表ul的id。 4 childTag:是父容器里面包裹每一个图片的标签名,在无序列表里可以是li。 5 使用此插件要想有一个图片透明度渐进改变的效果,要给包裹图片的标签一个样式,如下: 6 transition: opacity 1s ease-in-out; 7 可以对这个transition就行相应的修改; 8 建议使用此插件的Html结构如下: 9 <ul id="parentId"> 10 <li><img src=""></li> 11 <li><img src=""></li> 12 <li><img src=""></li> 13 </ul> 14 此时:parentId即为ul的id; 15 childTag即为li; 16 */ 17 18 var autoPlay=function(parentID,childTag) { 19 var pictures = document.getElementById(parentID); 20 var items = pictures.getElementsByTagName(childTag); 21 var len=items.length; 22 var index = 0; 23 showItem(); 24 // 显示一张图片 25 function showItem() { 26 // 首先将所有图片透明度设为0 27 hideItems(); 28 items[index].style.opacity = 1; 29 // 将要显示的透明度改变让其显示 30 if (index > len - 2) { 31 index = 0; 32 } else { 33 index++; 34 } 35 // 在这里用setTimeout模拟setInterval的效果 36 setTimeout(showItem, 2500); 37 } 38 // 将所有图片透明度设为0 39 function hideItems() { 40 for (var i = 0; i < len; i++) { 41 items[i].style.opacity = 0; 42 } 43 } 44 };
View Code
这样调用该插件即可:autoplay.js是我将这个插件保存到本地的一个文件。
1 <script type="text/javascript" src="./autoplay.js"></script> 2 <script type="text/javascript"> 3 autoPlay('pictures','li'); 4 </script>
View Code
这里面实现的时候结合了css3的transition属性,让代码更简洁,动画效果也更好。关于transition的兼容我代码中并没有加前缀,需要的小伙伴们可以自行加上,这里只演示一个实现过程。
第二种轮播特效:
这一种是滑动形式的,通过改变元素的left值让图片呈现左右滚动的效果。
html结构式这样子的:
1 <ul id="pictures"> 2 <li><img src=""></li> 3 <li><img src=""></li> 4 <li><img src=""></li> 5 <li><img src=""></li> 6 </ul>
View Code
js插件代码是这样子的:
1 var autoSlide = function(parentId, childTag) { 2 var parent = document.getElementById(parentId); 3 // 这里将元素的position设为relative,这样才可以对left值进行改变,当然也可以设为absolute 4 parent.style.position = "relative"; 5 var items = parent.getElementsByTagName(childTag); 6 var width = items[0].offsetWidth; 7 var index = 0; 8 function slide() { 9 if (index > items.length - 2) { 10 index = 0; 11 } else { 12 index++; 13 } 14 moveWidth = -width * index; 15 parent.style.left = moveWidth + "px"; 16 setTimeout(slide, 1500); 17 } 18 slide(); 19 };
View Code
插件的调用方式和上面第一种的一样,因为原理都差不多,同样结合了css3的动画实现,所以就不赘述原理了。
还有一种是无缝轮播方式,就个人感觉这种的显示效果最好。
转载于:https://www.cnblogs.com/luxueping/p/5591245.html
关于图片轮播的几种思路相关推荐
- html+轮播图下标跳转代码,最简单的JavaScript图片轮播代码(两种方法)
通过改变每个图片的opacity属性: 素材图片: 代码一: 最简单的轮播广告 body, div, ul, li { margin: ; padding: ; } ul { list-style-t ...
- 详细简单的php图片轮播,最简单的JavaScript图片轮播代码(两种方法)_javascript技巧...
通过改变每个图片的opacity属性: 素材图片: 代码一: 最简单的轮播广告 代码二: 首先第一步,下载好一个jquery库的插件,jquery.js 网上很多随处可以下载.下载的插件要放在目录下. ...
- Android 实现图片轮播的三种方法,android开发者论坛
public Object instantiateItem(ViewGroup container, int position) { // 对ViewPager页号求模取出View列表中要显示的项 p ...
- 电子商店——图片轮播
电子商店的图片轮播功能,有以下特点 1. 高性能 2. 美观大方 3. 兼容IE 6.IE 8+和Firefox 3+等浏览器 4. 总体积要小(除图片外)3k 5. js简单易懂(40行) 首先让我 ...
- 图片轮播的实现(详解两种方法)
今天带来的是前端里图片轮播的实现,可以说,这两种方法都很简单,尤其第一种,只要是有点基础的应该都可以看懂,这也是小编花费了一定时间想到的代码较少的方式.(图片我放在文末了) 当然也有更复杂的图片,也会 ...
- html垂直居中走马灯,史上最全解析:4种方法制作-PPT跑马灯/走马灯图片轮播动画...
本期要点:全面解析不同场景下的跑马灯PPT图片动画 技巧概要:动画精准衔接 路径起点终点位置 插件提高效率 图文编辑:幻云PPT设计 大雄董军 比如我们今天要讲的跑马灯动画 跑马灯动画其实是根据咱们传 ...
- vue 实现无限轮播_使用Vue制作图片轮播组件思路详解
之前一直都没有认真的写过一个组件.以前在写业务代码的过程中,都是用的别人封装好的组件,这次尝试着写了一个图片轮播组件,虽然比不上知名的轮播组件,但它的功能基本完整,而且在写这个组件的过程中,学的东西也 ...
- html图片轮播思路,css3如何实现轮播图?css3实现轮播图片的方法
我们在网页上经常会看到有一块位置会有很多的图片来回切换,这就是轮播图,轮播图的出现,让重要的信息可以在一个位置显现,那么,轮播图是如何实现的呢?轮播图的实现用js或者css都可以,本篇文章就来给大家介 ...
- Qt之实现图片轮播效果
一.简述 今天文章讲述的是如何用Qt实现图片轮播的效果,其实我们经常在网页中看到各种广告就是使用了图片轮播,实现小区域内嵌入多个广告的效果. 下面是CSDN页面中两种常见的图片轮播效果.基本上就是定时 ...
最新文章
- java主线程捕获子线程中的异常
- TensorBoard(一)
- 百度SEO emlog虚拟源码商城模板
- day10-协程遇到IO操作自动切换
- KubeEdge led部署
- 一行能装逼的JavaScript代码,就是怎么sao
- iOS核心动画详解swift版----基础动画
- HDU 5071 模拟
- 优化算法(1):最速下降法、牛顿法
- Android扩展知识 - 减轻C盘压力,扩大C盘空闲容量
- 一种高效查找树-radix的实现
- 定时关机系统~~开整
- 激光SLAM:Livox激光雷达硬件时间同步
- NiFi Registry元数据详细介绍
- linux怎么滑动命令行窗口_如何在Linux命令行界面愉快进行性能测试
- rpm包的签名问题笔记
- 工业水处理行业主要壁垒构成及重点企业分析、相关风险、处理规模
- QQ在线代码,MSN在线代码,雅虎通在线代码,阿里旺旺在线代码
- CSS Overscroll Behavior Module Level 1
- 脉冲神经网络(SNN)论文阅读(三)-----高精度低时延的ANN转换SNN方法
热门文章
- javaweb学习总结(十)——HttpServletRequest对象(一)
- 读文件夹下所有文件,并提取中文字符
- IOS UITableView性能优化
- 人工智能与智能系统的先驱人物
- 【iCore组合式双核心开发板教程】【快速使用手册】
- TaskList与Taskkill(转)
- 【GitLab】gitlab上配置webhook后,点击测试报错:Requests to the local network are not allowed...
- 烧流量还是打矩阵,短视频不疯魔不成活?
- 服务器监控软件ZABBIX
- mysql ERROR 1042 (HY000): Can't get hostname for your address