关于图片轮播的几种思路

Posted 自诩

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于图片轮播的几种思路相关的知识,希望对你有一定的参考价值。

图片轮播我们经常在众多网站中看到,各种轮播特效在有限的空间上展示了几倍于空间大小的内容,并且有着良好的视觉效果。很多初学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的动画实现,所以就不赘述原理了。

还有一种是无缝轮播方式,就个人感觉这种的显示效果最好。

 

以上是关于关于图片轮播的几种思路的主要内容,如果未能解决你的问题,请参考以下文章

图片轮播的手写代码

图片轮播的思路

VUE开发一个图片轮播的组件

关于jquery轮播的问题,如何通过1234标号来控制轮播?

基于ionic框架封装一个图片轮播指令的几点

jquery图片上下轮播的问题,怎么实现自动轮播?