用JS实现图片轮播效果代码（一）

⽤JS实现图⽚轮播效果代码（⼀）
⼀.实现原理
（1）将所有图⽚放在⼀个⽗容器div⾥⾯，通过display属性来设置图⽚的出现与隐藏；
（2）轮播图分为⼿动轮播和⾃动轮播；
⼿动轮播的重点是每次点击图⽚下⽅的⼩圆圈，获得它的索引号，并让与之对应索引号的图⽚显⽰，并且此时的⼩圆圈为⾼亮显⽰；
⾃动轮播：利⽤定时器setInterval()，来每隔⼀定的时间来播放⼀次图⽚。

（3）所有的基础知识：dom操作，定时器，事件运⽤。

⼆.轮播图页⾯布局：
<div id="content"> <!-- 总的⽗容器 -->
<div class="carousel-inner"> <!-- 包含图⽚的容器 -->
<div class="item "><img src="./img/lunbo1.jpg" alt="第⼀张图⽚"></div>
<div class="item"><img src="./img/lunbo2.jpg" alt="第⼆张图⽚"></div>
<div class="item"><img src="./img/lunbo3.jpg" alt="第三张图⽚"></div>
</div>
<!-- 图⽚下⽅的指⽰圆圈-->
<ul class="carousel-indicators">
<li id='pic1'>●</li>
<li id='pic2'>●</li>
<li id='pic3'>●</li>
</ul>
<!-- 图⽚左右⽅来回滚动图⽚的左右箭头-->
<a href="#" class="carousel-control prev"><span><</span></a>
<a href="#" class="carousel-control next"><span>></span></a>
</div>
三.轮播图的css样式：
#content{
width: 100%;
height:500px;
position: relative;
}
.carousel-inner{
position: relative;
width: 100%;
overflow: hidden;
height:500px;
}
.carousel-inner>.item>img{
display: block;
line-height: 1;
z-index: 1;
}
.carousel-indicators{
position: absolute;
bottom:10px;
left:45%;
z-index: 2;
list-style-type: none;
}
.carousel-indicators li{
display:inline-block;
padding: 0 15px;
font-size: 24px;
color:#999;
cursor: pointer;
z-index: 2;
}
.active1{
font-size: 28px;
color:#fff;
}
.carousel-control{
position: absolute;
text-decoration:none;
color: #999;
font-weight: bold;
opacity: .5;
font-size: 40px;
z-index: 3;
}
.carousel-control:hover{
color:fff;
text-decoration: none;
opacity: .9;
outline: none;
font-size: 42px;
}
.prev{
top: 30%;
left:20px;
}
.next{
top:30%;
right: 20px;
}
四.轮播图的js实现代码：
window.onload = function(){
//轮播初始化
var lunbo = document.getElementById('content');
var imgs = lunbo.getElementsByTagName('img');
var uls = lunbo.getElementsByTagName('ul');
var lis = lunbo.getElementsByTagName('li');
//初始状态下，⼀个圆圈为⾼亮模式
lis[0].style.fontSize = '26px';
lis[0].style.color = '#fff';
//定义⼀个全局变量，⽤来进⾏⾃动轮播图⽚顺序的变化
var pic_index = 1;
//⾃动轮播.使⽤pic_time记录播放，可以随时使⽤clearInterval()清除掉。

var pic_time = setInterval(autobofang,3000);
//⼿动轮播
for(var i=0;i<lis.length;i++){
lis[i].addEventListener("mouseover",change,false);
}
function change(event){
var event=event||window.event;
var target=event.target||event.srcElement;
var children = target.parentNode.children;
for(var i=0;i<children.length;i++){
if(target == children[i]){
picChange(i);
}
}
}
//图⽚切换函数
function picChange(i){
//让所有图⽚都不显⽰，所有圆圈都为普通样式
for(var j=0;j<imgs.length;j++){
imgs[j].style.display = 'none'; lis[j].style.fontSize = '24px';
lis[j].style.color = '#999';
}
//让选中的索引的图⽚显⽰，对应的圆圈⾼亮
imgs[i].style.display = 'block';
lis[i].style.fontSize = '26px';
lis[i].style.color = '#fff';
}
//⾃动播放的事件处理
function autobofang(){
if(pic_index >= lis.length){
pic_index = 0;
}
change1(pic_index);
pic_index++;
}
//⾃动播放的图⽚转化中的事件
function change1(index){
picChange(index);
//⿏标移⼊ul标签，⾃动播放图⽚暂停
uls[0].addEventListener("mouseover",pause,false);
//⿏标移出ul标签，⾃动播放图⽚继续
uls[0].addEventListener("mouseout",go,false);
}
//⾃动播放暂停函数
function pause(event){
var event=event||window.event;
var target=event.target||event.srcElement;
switch(target.id){
case "pic1":
clearInterval(pic_time);
break;
case "pic2":
clearInterval(pic_time);
break;
case "pic3":
clearInterval(pic_time);
break;
}
}
//⾃动播放图⽚继续函数
function go(event){
var event=event||window.event;
var target=event.target||event.srcElement;
switch(target.id){
case "pic1":
pic_index = 1;
pic_time = setInterval(autobofang,3000);
break;
case "pic2":
pic_index = 2;
pic_time = setInterval(autobofang,3000);
break;
case "pic3":
pic_index = 3;
pic_time = setInterval(autobofang,3000);
break;
}
}
}
五.效果图：
六.遇到的问题与不⾜
问题：当⿏标第⼀次移⼊ul标签时，⾃动轮播图⽚停⽌，⿏标移出，⾃动轮播继续，但是随着运⾏，轮播图⽚的变化速度越来越快，⽽且这时点击ul标签已经不起作⽤了。

问题原因：在后⾯停⽌轮播后再次轮播开始使⽤定时器的时候，没有给赋值给pic_time来记录，也就没有再次⿏标移到ul标签⽽清除定时器，因此导致再次点击ul标签不能暂停⾃动轮播播放，⽽且速度越来越快。

不⾜：没有实现类似淘宝轮播图那样平滑过渡的⽆现滚动的效果，左右箭头的指⽰作⽤也没有完成。

这些在后期会继续学习，继续来完善，来分享.。