超详细轮播图，让你彻底明白轮播图！
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
超详细轮播图，让你彻底明⽩轮播图！
刚开始学JavaScript时候很多新⼿都会尝试写⼀些简单的⼩项⽬，轮播图应该是写的最多的。
但是很多时候对于基础不是很好的新⼿，虽然参照别⼈的代码能写出来⼀些轮播图，但其中的⼀些细节和过程可能还是⼀知半解甚⾄不懂，我作为⼀个新⼿刚刚写了⼏种常见的轮播图，⾥⾯的各种细节也花了不少时间弄懂，这⾥为⼤家介绍⼀种简单易懂且很完善的轮播图写法。
⾥⾯的细节我会⼀⼀详细说明，希望和各位初⼊JavaScript的⼩伙伴⼀起进步。
轮播图的思路其实很简单：就是⽤JavaScript来控制轮播的图⽚的样式，可以控制display：none or block 可以控制opacity：‘0’ or ‘1’ 也可以通过z-index来控制图⽚的摆放顺序。
(注意：这⾥的图⽚⼀般是通过绝对定位放在⼀个div盒⼦⾥⾯，图⽚堆叠在⼀起)。
思路很清晰，那么我们就来看看代码(代码是本⼈⾃⼰⼿写的)。
具体细节我会在代码中⼀⼀解释：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#main{
width: 730px;
height: 454px;
margin: 100px auto;
position: relative;
}
#main .scollimg{
width: 730px;
height: 454px;
position: relative;
}
#main .scollimg img{
position: absolute;
top: 0;
left: 0;
}
#main .btn{
width: 730px;
height: 220px;
position: absolute;
top:117px;
left: 0;
}
#main .btn>div{
width: 100px;
height: 220px;
background: #fff;
opacity: 0;
}
#main .btn：hover>div{
opacity: 0.35;
}
#main .btn #btnleft{
position: absolute;
top: 0;
left: 0;
}
#main .btn #btnright{
position: absolute;
top: 0;
right:0;
}
/*左右button⾥的三⾓形*/
.triangle{
margin-top: 50px;
width: 0;
height: 0;
border-width:70px 40px;
border-style: solid;
}
#main .btn #btnleft .triangle{
border-color: transparent #ccc transparent transparent;
}
#main .btn #btnright .triangle{
margin-left: 20px;
border-color: transparent transparent transparent #ccc;
}
#main .item{
position: absolute;
bottom: 30px;
left: 70px;
width: 200px;
height: 16px;
}
#main .item span{
width: 16px;
height: 16px;
background: #ccc;
display: inline-block;
border-radius: 50%;
}
#main .item span:hover{
cursor: pointer;
}
</style>
</head>
<body>
<div id="main">
<div class="scollimg">
<img src="images/1.jpg" alt="">
<img src="images/2.jpg" alt="">
<img src="images/3.jpg" alt="">
</div>
<div class="btn">
<div id="btnleft"><div class="triangle"></div></div>
<div id="btnright"><div class="triangle"></div></div>
</div>
<div class="item">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script type="text/javascript">
window.onload=function(){
autoMove('img','span');
}
//轮播图函数
function autoMove(tagImg,tagSpan){
var imgs=document.getElementsByTagName(tagImg);
var spans=document.getElementsByTagName(tagSpan);
//每次轮播后样式
/*轮播到哪个位置，就对哪个位置的图⽚样式进⾏设置，⾸先让所有的图⽚样式opacity变为0，然后对移动到的位置的样式进⾏设置opacity为1*/
function InitMove(index){
for(var i=0;i<imgs.length;i++){
imgs[i].style.opacity='0';
spans[i].style.background='#ccc';
}
imgs[index].style.opacity='1';
spans[index].style.background='red';
}
//第⼀次初始化
InitMove(0);
//轮播过程的变换函数
/*前⾯已经初始化了图⽚最开始看到的效果，接着轮播的话会隐藏第⼀张出现第⼆张
*这⾥count从1开始（图⽚的初始化位置是count为0的情况），count=1执⾏⼀次Init*Move(count),使第⼀张隐藏第⼆张出现，依次执⾏。
当count==imgs.leghth时由于*图⽚最后⼀张的位置是imgs.length-1,所以此时把count置为0；相当于轮播 *依次重新开始。
*/
var count=1;
function fMove(){
if(count==imgs.length){
count=0;
}
InitMove(count);
count++;
}
//设置⾃动轮播定时器；
var scollMove=setInterval(fMove,2500);
//点击移动图⽚；
/*这⾥就是点击左右移动的button来让图⽚根据⽤户的点击左右移动；需要注意⼀点就*是每次点击左移动或右移动需要⾸先清除定时器，等移动完了在重新添加定时器不然的*话你点击移动后图⽚虽然该变了，但是由于定时器还没移动到这张 *就点击移动图⽚，⼀直移动到最后⼀张那么你就要等待两个定时器的时间才能看到⾃动*轮播。
*/
var btnleft=document.getElementById('btnleft');
var btnright=document.getElementById('btnright');
btnleft.onclick=function(){
clearInterval(scollMove);
if(count==0){
count=imgs.length;
}
count--;
InitMove(count);
scollMove=setInterval(fMove,2500);
};
btnright.onclick=function(){
clearInterval(scollMove);
fMove();
scollMove=setInterval(fMove,2500);
}
}
</script>
</body>
</html>
这就是最基本的轮播图，效果基本没有什么问题。
通⽤性强。
最终效果：。