【怪咖】------简单的轮播图------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#cont{
position: absolute;
margin-left: 40%;
margin-top: 40px;
}
#cont p:nth-of-type(1){
width: 20px;
height: 30px;
background: gray;
position: absolute;
left:0;
top:50%;
font-size: 14px;
line-height: 30px;
text-align: center;
display: none;
}
#cont p:nth-of-type(2){
width: 20px;
height: 30px;
background: gray;
position: absolute;
right:0;
top:50%;
font-size: 14px;
line-height: 30px;
text-align: center;
display: none;
}
</style>
</head>
<body>
<div class="container">
<div id='cont'>
<p id='btn'><</p>
<img id='round' src='img/2.jpg'>
<p id='sub'>></p>
</div>
</div>
<script type="text/javascript">
//记录当前下标
var index = 0;
//创建数组
var arr = new Array("2.jpg","3.jpg","4.jpg","5.jpg","6.jpg");
//获取左右按键按钮
var oBtn = document.getElementById('btn');
var oSub = document.getElementById('sub');
var oCont = document.getElementById('cont');
//点击事件
oBtn.onclick = function(){
var Img =document.getElementById('round');
if(index == arr.length - 1){
index = 0;
}else{
index ++;
}
Img.src = 'img/' + arr[index];
}
oSub.onclick = function(){
var Img =document.getElementById('round');
if(index == arr.length - 1){
index = 0;
}else{
index ++;
}
Img.src = 'img/' + arr[index];
}
//自动轮播
var timer = null;
function autoPlay(){
timer = setInterval(function(){
var Img =document.getElementById('round');
if(index == arr.length - 1){
index = 0;
}else{
index ++;
}
Img.src = 'img/' + arr[index];
},1500);
}
//移入事件
oCont.onmouseenter = function(){
oBtn.style.display = 'block';
oSub.style.display = 'block';
//移入停止自动轮播
clearInterval(timer);
}
//移除事件
oCont.onmouseleave = function(){
oBtn.style.display = 'none';
oSub.style.display = 'none';
//移出开启自动轮播
autoPlay();
}
</script>
</body>
</html>
