标签：int 轮播 top media offset relative seo doc clear
html,css代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style media="screen">
#imgArea{
width: 510px;
height: 286px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
#inner{
width: 99999px;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
}
#inner a{
float: left;
}
#inner img{
display: block;
width: 510px;
}
#btn{
width: 510px;
margin: 0 auto;
text-align: center;
}
#btn button {
width: 60px;
height: 40px;
outline: none;
border: none;
}
#btn .active{
background-color: orange;
color:white;
}
.changeBtn a{
color:white;
position: absolute;
width: 40px;
height: 40px;
line-height: 40px;
font-size: 30px;
text-align: center;
background-color: rgba(0,0,0,0.5);
text-decoration: none;
top:0;
bottom:0;
margin: auto;
display: none;
}
#pre{
left: 0;
}
#next{
right: 0;
}
#imgArea:hover .changeBtn a{
display: block;
}
</style>
</head>
<body>
<div id="imgArea">
<div 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/6.jpg" ></a>
<a href="###"><img src="img/1.jpg" ></a>
</div>
<div class="changeBtn">
<a href="javascript:void(0)" id="pre"><</a>
<a href="javascript:void(0)" id="next">></a>
</div>
</div>
<div id="btn">
<button class="active">1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
<button>6</button>
</div>
js代码部分
<script type="text/javascript">
var imgArea = document.getElementById(‘imgArea‘);
var btnGroup = document.getElementsByTagName(‘button‘);
var pre = document.getElementById(‘pre‘);
var next = document.getElementById(‘next‘);
var inner = document.getElementById(‘inner‘);
var len = btnGroup.length;
var index = 0;
var timer ;
var time ;
// 进度
var processFlag = true;
for(var i = 0;i < len;i++){
btnGroup[i].index = i;
btnGroup[i].onclick = function(){
index = this.index;
tab()
}
}
function tab(){
// 按钮
for(var j = 0;j < len;j++){
btnGroup[j].className = "";
}
if(index > 5){
btnGroup[0].className = "active";
}else{
btnGroup[index].className = "active";
}
console.log(index);
// 滚动
var start = inner.offsetLeft;
var end = index *-510;
var distance = end - start;
var step = 0;
var totalStep = 40;
clearInterval(timer);
timer = setInterval(function(){
// console.log(step);
step++;
if( step >= totalStep ){
clearInterval(timer);
processFlag = true;
}
inner.style.left = step * distance/totalStep+ start + ‘px‘;
},7);
}
pre.onclick = function(){
if(processFlag){
index--
if (index < 0) {
index = len-1;
inner.style.left = -len * 510+"px";
}
}
tab();
processFlag = false;
}
next.onclick = function(){
if(processFlag){
index++;
if(index > 6){
index = 1;
inner.style.left = 0+‘px‘;
}
}
tab();
processFlag = false;
}
time = setInterval(function(){
if(processFlag){
index++;
if(index > 6){
index = 1;
inner.style.left = 0+‘px‘;
}
}
tab();
processFlag = false;
},1200);
imgArea.onmouseover = function(){
clearInterval(time);
}
imgArea.onmouseout = function(){
time = setInterval(function(){
if(processFlag){
index++;
if(index > 6){
index = 1;
inner.style.left = 0+‘px‘;
}
}
tab();
processFlag = false;
},1200);
}
</script>
</body>
</html>
标签：int 轮播 top media offset relative seo doc clear
原文地址：http://www.cnblogs.com/mao666/p/6118281.html
