<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 标签样式初始化 /
body{margin:0;padding:0;background:#fff;font-size:14px;font-family:Arial,Helvetica,'STHeiti','Microsoft YaHei','sans-serif'}
form,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
img{border:0;}
ul,li{list-style-type:none;}
a{color:#00007F;text-decoration:none;}
a:hover{text-decoration:none;}
/标签样式初始化*/
#wrap{
position: relative;
width: 700px;
height: 430px;
margin: 0 auto;
overflow: hidden;
}
#photo{
position: relative;
width: 9999px;
transition:all 1s;
left: 0;
}
#photo img{
float: left;
width: 700px;
}
#bottom{
position: absolute;
text-align: center;
width: 100%;
bottom: 15px;
}
.pages{
width: 18px;
height: 18px;
border-radius: 50%;
background: black;
display: inline-block;
color: white;
line-height: 18px;
text-align: center;
font-size: 12px;
}
.selected{
background: red;
}
#center{
position: absolute;
top: 50%;
width: 100%;
display: none;
margin-top: -30px;
}
#center a{
width: 28px;
height: 62px;
background: rgba(0,0,0,0.6);
float: left;
text-align: center;
color: white;
line-height: 62px;
}
#center #rightbtn{
float: right;
}
#center #leftbtn{
float: left;
}
</style>
</head>
<body>
<div id="wrap">
<div id="photo">
<img src="img/10.png" alt="">
<img src="img/2.png" alt="">
<img src="img/55.jpg" alt="">
<img src="img/66.jpg" alt="">
<img src="img/5.png" alt="">
<img src="img/9.png" alt="">
</div>
<!-- 图片下方的小圆点 -->
<ul id="bottom">
<li class="pages selected">1</li>
<li class="pages">2</li>
<li class="pages">3</li>
<li class="pages">4</li>
<li class="pages">5</li>
<li class="pages">6</li>
</ul>
<!-- 图片左右两边的按钮 -->
<div id="center">
<a href="#" class="btn"id="leftbtn"><</a>
<a href="#" class="btn" id="rightbtn">></a>
</div>
</div>
<script>
//获取元素
// var wrap = document.getElementById('wrap');
var photo = document.getElementById('photo');
var imgs = document.getElementsByTagName('img');
var pages = document.getElementsByClassName('pages');
var btn = document.getElementsByClassName('btn');
var leftBtn = document.getElementById('leftbtn');
var rightBtn = document.getElementById('rightbtn');
//自动轮播大图
var timer = null;
function autoplay(){
timer= setInterval(function(){
index++;
if(index>5){
index = 0;
}
photo.style.left = index * -imgs[0].width + "px";
change();
},2000);
}
//轮播的自动调用
autoplay();
//点击右侧的按钮是图片滚动
var index = 0;
rightbtn.onclick =function(){
clearInterval(timer);
index++;
if (index > 5) {
index = 0;
};
photo.style.left = index * -(imgs[0].width) + "px";
change();
//如果要是点击不让图片动就把他主调
// autoplay();
}
//点击左侧的按钮是图片滚动
leftbtn.onclick = function(){
clearInterval(timer);
index--;
if (index < 0) {
index = 5;
};
photo.style.left = index * -imgs[0].width + "px";
change();
//如果要是点击不让图片动就把他主调
// autoplay();
}
//当鼠标移出时，左右两侧按钮消失，当鼠标移入时，左右按钮出现
wrap.onmouseout = function() {
document.getElementById('center').style.display = 'none';
autoplay();
}
wrap.onmouseover = function() {
document.getElementById('center').style.display = 'block';
clearInterval(timer);
}
//当鼠标移入底部分页按钮时，改变按钮样式并改变相应的图片
for (var i = 0; i < pages.length; i++) {
pages[i].index = i;
//为分页按钮添加点击事件
pages[i].onmouseover = function(){
clearInterval(timer);
photo.style.left = this.index *-imgs[0].width + 'px';
index = this.index;
change();
autoplay();
}
};
//页码的样式改变
function change (){
for(var i = 0;i < pages.length;i ++){
pages[0].style.background = 'black';
pages[i].style.background = '';
}
pages[this.index].style.background = 'red';
}
</script>
</body>
</html>
网友评论