Posted in Javascript onJanuary 20, 2016
本文实例介绍了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程序设计有所帮助。
javascript实现图片轮播效果
- Author -
Cakty、Riven声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@