用JavaScript实现网页无限轮播图效果，附整套源码

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前端课程’关注后回复‘给我资料’可以领取一套完整的学习视频

例1: 无缝连续滚动

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 1000px;
height: 130px;
margin: 100px auto;
border: 1px solid #000;
position: relative;

overflow: hidden; /* 防止滚动的图片溢出 */
}
ul{
width: 2000px;
position: absolute;
left: 0;
top: 0;
}
li{
float: left;
}
img{
display: block;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
<!--我们在复制一套出来-->
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
</ul>
</div>

<script type="text/javascript">
var ul = document.getElementsByTagName("ul")[0];

setInterval(function(){
    if(getStyle(ul,"left")===-1000){
    ul.style.left = "0px";//执行这一行代码需要多长时间???
    }

    ul.style.left = getStyle(ul,"left") - 1 + "px";
},10)


function getStyle(obj,attr){
    if(window.getComputedStyle){
    return parseInt(window.getComputedStyle(obj)[attr]);
    }else{
    return parseInt(obj.currentStyle[attr]);
    }
}
</script>
</body>
</html>

图片规格: 200px 130px

个完整的网站是由多个网页组成的，下面我来介绍下网页当中最基本的一种功能——轮播图：

下面先看看基本的代码

<!DOCTYPE html>

<head>

<title>简易网站轮播图</title>

<style>

.container{

width: 100%;

position: relative;

}

.container div{

width: 100%;

position: absolute;

opacity: 0;

}

div.show{

opacity: 1;

}

.container img{

width: 100%;

border-radius: 10%;

}

</style>

</head>

<body>

</div>

function task(){

var show=document.querySelector("#slider>div.show");

show.className="";

if(show.nextElementSibling!==null)

show.nextElementSibling.className="show";

else

show.parentNode.children[0].className="show";

}

setInterval(task,1000)

</script>

</body>

</html>

大家看到这些代码是不是头疼呢？这个代码实现的效果请看相关视频

同时希望大家给我的视频点点赞和关注，以后将继续发布一些程序类的视频供大家一起学习进步！

在线咨询

上一篇：通告ImageMagick再爆核心漏洞站长小心
下一篇：HTML常用标签

您的项目需求

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

整合营销服务商

用JavaScript实现网页无限轮播图效果，附整套源码

您的项目需求