JavaScript实现HTML轮播，简单有效

说一下需要的知识 setinterval函数，明白document. getelementsById是什么意思。

轮播呈现方式多种多样，鄙人在这里给出一个比较low的方法，若有大神指教，不甚感激！

思路：

1、在body里面设置一个img标签，src路径暂且不设置，并给img标签设置id。

2、写一个function函数，里面设置src随着某种变量而改变的条件。

下面撸代码！！！

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<img id = "image"/>
<script >
function $(id){
return document.getElementById(id);
}
var index=1;
function setSrc(){
$("image").src="./img/"+index+".png";
++index;
if(index==3){
index=1;
}
}
setSrc();
setInterval("setSrc()",500);
</script>
</body>
</html>

在这里我采用了投机取巧的方式，我的图片名都是：

读者可以按照需要改变一下函数的结构

言

轮播图已经是一个很常见的东西，尤其是在各大App的首页顶部栏，经常会轮番显示不同的图片。

一提到轮播图如何实现时，很多人的第一反应就是使用Javascript的定时器，当然这种方法是可以实现的。不过就是有些繁琐，今天这篇文章我们来看看如何不用Javascript，而使用纯CSS代码去实现轮播图吧。

这篇文章的所有代码我都放在了github上，感兴趣的同学可以去看看。

https://github.com/zhouxiongking/article-pages/blob/master/articles/carousel/carousel.html

CSS

实现效果

首先我们来看看只使用CSS实现的轮播图效果。

实现效果图

具体分析

看到上述的实现效果后，我们来具体分析下页面的构成。

页面在布局上首先要有5张图片，图片固定宽度。
每张图片对应一个标题，标题通过ul>li实现，事先算好宽度，跟随图片一起滚动。
下边有个1,2,3,4,5表示图片顺序的索引，鼠标放上去后会显示对应的图片。

HTML页面

接下来我们通过代码层面去看看整个效果是如何实现的。

首先来看看HTML页面的实现，代码中都有每个区域的描述。

HTML页面

CSS部分

实现这个效果主要是通过CSS代码的，其代码量比较大，我们分开来看。

外层容器

对于最外层容器我们设置绝对定位，方便图片标题子元素的定位。

外层容器

图片标题

对于图片的标题我们也采用绝对定位，并且让标题横向一行展示，方便在动画的时候直接横向滚动。

得到的代码如下所示。

图片标题

图片与图片容器

接下来是设置图片容器属性以及图片的基本大小。

图片容器也采用绝对定位，宽度可以动态设置，根据图片数量计算。每张图片设置宽度与高度，得到的代码如下。

图片与图片容器

图片动画效果

然后设置图片的动画效果，对于任意的图片都有进入和静止两个状态，中间的效果可以任意定制。

在这里，中间效果设置成5%的间隔，其他时间在进行位置的切换，因为图片是处于水平分布，通过设置margin-left的值为负数进行偏移即可。

图片动画效果

数字索引的基本属性

对于下面的数字图标也是通过基本的CSS属性进行设置的，包括宽高，行高，透明度等等。

在鼠标移动到对应的数字上后，数字会显示不同的颜色。而且在鼠标停留在数字上后，动画效果会暂停。

数字索引基本属性

数字索引的偏移量

因为数字是水平方向展示的，因此要设定每个数字的水平偏移量。

数字水平偏移量

鼠标停在数字上的动画效果

然后就是处理鼠标停留在数字上的动画效果，因为每张图片对应特定的数字，需要计算出每次的动画开始位置和结束位置。

鼠标停在数字上的动画效果

动画效果赋予指定的数字

最后一步就是将定义的动画效果赋予指定的数字上，每个数字都有特定的id。得到的代码如下。

动画效果赋予指定的数字

至此所有步骤完成了，就可以得到文章开始的动画效果了。

结束语

这篇文章完全通过CSS实现了一个轮播图的效果，相比于使用JS来说减少页面阻塞程度，效果更好。

JavaScript实现无限轮播图效果（附源码）

javascript群内每日课题-今日课题：用JavaScript实现无限轮播图效果

PS:很多企业通用的案例自己再学习过程中肯定是要熟练的，所以今天做了这个无限轮播，很多人都担心自己写的代码烂，而不敢去写代码，总想着等自己等写出好的代码再来做游戏，再来练习，其实我的意见是前端新人要多些烂代码，不管你在学习中还是工作中，你不写够足量的烂代码，是无法进化到写好代码的程度，所以练习吧骚年

如果想要更多的企业求职加分项目，案例，游戏源码，可以来一下我的前端群216634437，每天都会精挑细选一个特效，项目游戏出来详细讲解，分享！

知识要点

1.实现无限循环的原理：

以偏移的距离来判断是否跳回第一张和最后一张

也可以利用循环判断图片的当前索引值

2.当前图片轮播的圆点变色显示：

因为每次点击index+1 所以当前的index-1就是button的索引

3.实现动画滚动效果：

原理就是把每次的偏移量分为多次完成比如一次600px那就分为10次每次偏移60px

就要用到setTimeout(go,10);//10毫秒再次调用go函数，一直到不满足条件就停

4.点击圆点按钮执行动画：

原理获取当前的按钮位置再获取要点击的按钮的位置

用（点击的——当前的）*-600=需要跳转的正负距离（向左或向右）

5.自动播放：

给外层容器加个onmouseover事件再调用setInterval方法

想要练习这个案例的进群领取源码：216634437（代码已经上传到群文件，自助下载练习）

头条号里有许多web前端学习视频，企业常用特效/案例/项目，敬请关注！

如果想看到更加系统的文章和学习方法经验可以关注我的微信公众号：‘web前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频

在线咨询

上一篇：HTML5标准三维建筑表现技术，不需要安装任何专用插件
下一篇："探秘CSS3：打造视觉盛宴-深度解析渐变、阴影与遮罩技

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript实现HTML轮播，简单有效

言

实现效果

具体分析

HTML页面

CSS部分

结束语

您的项目需求