javascript实现图片轮播效果

本文实例介绍了javascript实现图片轮播效果的详细代码，分享给大家供大家参考，具体内容如下
效果图：
具体代码：
<！DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;} .wrap{ width: 510px; margin: 0 auto; overflow: hidden;position: relative; } .caktye{ width: 9999px; overflow: hidden; position: relative; left: 0; } .main{ text-align: center;position: absolute;bottom: 10px;/*border: 1px solid red;*/left: 35%; } .main button{ width: 25px;height: 25px;text-align: center;line-height: 25px;border-radius: 25px;display: inline-block;border: none; } .active{ background-color: yellow; } .caktye a{ float: left; } .caktye img {display: block;width:510px;} #prevBtn{display: block;position: absolute;left: 5px;bottom: 45%;width: 15px;height: 15px;/*overflow: hidden;*/border-left: 5px solid ;border-top: 5px solid ; border-color: rgba（255,255,255,0.5）;-webkit-transform: rotate（45deg）;transform: rotate（-45deg）; } #nextBtn{display: block;position: absolute;right: 5px;bottom: 45%;width: 15px;height: 15px;/*overflow: hidden;*/border-right: 5px solid;border-top: 5px solid;-webkit-transform: rotate（45deg）;transform: rotate（45deg）;border-color: rgba（255,255,255,0.5）;/*background-color: rgba（255,255,255,0.8）;*/ }</style></head><body> <div class="wrap"> <div class="caktye" id="inner"><a href="###"><img src="img/1.jpg"></a><a href="###"><img src="img/2.jpg"></a><a href="###"><img src="img/3.jpg"></a><a href="###"><img src="img/4.jpg"></a><a href="###"><img src="img/5.jpg"></a><a href="###"><img src="img/1.jpg"></a> </div><div class="main"><button class="active">1</button><button>2</button><button>3</button><button>4</button><button>5</button> </div> <div><a href="###" id="prevBtn"></a><a href="###" id="nextBtn"></a> </div></div> <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; }</script></body></html>
希望本文所述对大家学习javascript程序设计有所帮助。