本文实例介绍了javascript实现图片轮播效果的详细代码，分享给大家供大家参考，具体内容如下
效果图：
具体代码：
<div class="wrap">
<div class="caktye" id="inner">
<a href="###"><img src="img/1.jpg">
<a href="###"><img src="img/2.jpg">
<a href="###"><img src="img/3.jpg">
<a href="###"><img src="img/4.jpg">
<a href="###"><img src="img/5.jpg">
<a href="###"><img src="img/1.jpg">
@H_502_17@
<div class="main">
<button class="active">1
@H_50217@
@H502_17@
<script type="text/javascript">
var innerList = document.getElementById("inner");
var btnList = document.getElementsByTagName("button");
var perWidth = inner.children[0].offsetWidth;
var prevBtn = document.getElementById("prevBtn");
var nextBtn = document.getElementById("nextBtn");
// var imgList = inner.getElementsByTagName("img");
// var perWidth = imgList[0].offsetWidth;
var timer = 0;
var timer1 = 0;
var index =0;
var runFlag = true; //设置一个动画是否走完的标志位
for(var i = 0; i < btnList.length; i++) {
btnList[i].index = i;
btnList[i].onclick = function() {
index = this.index;
tab();
}}
function tab() {
var start = inner.offsetLeft;
var end = - perWidth * index;
var change = end - start;
var t = 0;
var maxT = 30;
clearInterval(timer1);
timer1 = setInterval(function() {
t++;
if(t >= maxT) {
clearInterval(timer1);
// alert("停下来了");
runFlag = true;
}
inner.style.left = change/maxT * t + start + "px";
if(index == btnList.length && t >= maxT) {
inner.style.left = 0;
}
},30)
// inner.style.left = - perWidth * index + "px";
for(var j = 0; j < btnList.length; j++) {
btnList[j].className = "";
}
if(index >= btnList.length) {
btnList[0].className = "active";
}else {
btnList[index].className = "active";
}}
function xunhuan(){
index++;
if(index>btnList.length){
index=1;
}
// inner.style.left = - perWidth * index + "px";
tab();}
var timer =setInterval(xunhuan,5000);
inner.onmouSEOver =function(){
clearInterval(timer);
}
inner.onmouSEOut =function(){
timer = setInterval(xunhuan,5000);
}
function next() {
index++;
if(index > btnList.length) {
index = 1;
}
tab();
}
function prev() {
index--;
if(index < 0 ) {
index = btnList.length - 1;
inner.style.left = - btnList.length * perWidth + "px";
console.log(index);
}
tab();
}
//下一张
nextBtn.onclick = function() {
clearInterval(timer);
if(runFlag) {
next();
}
runFlag = false;
}
//上一张
prevBtn.onclick = function() {
clearInterval(timer);
if(runFlag) {
prev();
}
runFlag = false;
}