这篇文章主要介绍了用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标签不能暂停自动轮播播放，而且速度 越来越快。

不足：没有实现类似淘宝轮播图那样平滑过渡的无现滚动的效果，左右箭头的指示作用也没有完成。这些在后期会继续学习，继续来完善，来分享.