<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width:1000px;
height:460px;
margin:50px auto;
overflow:hidden;
position:relative;
}
.imgs{
width:1000px;
height:460px;
white-space:nowrap;
}
img{
width:1000px;
height:460px;
}
.center {
width:100%;
height:25px;
position:absolute;
bottom:10px;
text-align: center;
}
.center span{
width:20px;
height:20px;
display:inline-block;
border-radius: 50%;
margin-right:10px;
background-color:#ccc;
}
.left,.rigth{
width:50px;
height:50px;
line-height:50px;
text-align:center;
}
.left{
float:left;
position:absolute;
top:230px;
left:0px;
background-color:rgba(211,211,211,0.5);
cursor:pointer;
}
.rigth{
float:right;
position:absolute;
top:230px;
right:0px;
background-color:rgba(211,211,211,0.5);
cursor:pointer;
}
span:hover{
cursor:pointer;
}
</style>
</head>
<body>
<div id="box">
<!-- 图片区域 -->
<div class="imgs">
<img src="images/1.jpg" alt="">
</div>
<!-- 底部小圆点 -->
<div class="center">
<span style="background-color:red;"></span>
<span></span>
<span></span>
<span></span>
</div>
<!-- 左右箭头 -->
<div class="left" onMouseDown="chang(1)" onMouseUp="change()">
<
</div>
<div class="rigth" onMouseDown="chang(0)" onMouseUp="change()">
>
</div>
</div>
<script>
//获取元素
var img = document.getElementsByTagName("img")[0];
var div = document.getElementsByClassName("imgs")[0];
var span = document.getElementsByTagName("span");
var bLeft = document.getElementsByClassName("left")[0];
var bRight = document.getElementsByClassName("right")[0];
//创建轮播图片地址数组
var imgs = ["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"];
//设置图片索引暂存变量
var flag = 0 ;
var num = 1 ;
//图片移动设置
function move(){
flag += num ;
if(flag == imgs.length){
flag = 0;
}
if(flag == -1){
flag = imgs.length-1;
}
img.src = imgs[flag];
//设置下方小圆点跟随图片运动而运动
for(var i = 0 ; i < span.length ; i++){
if(i == flag){
//改变颜色
span[flag].style.backgroundColor = "red" ;
}else{
//清空颜色
span[i].style.backgroundColor = "" ;
}
}
}
//运动计时器
time = setInterval(move,2000);
//设置鼠标划入图片暂停功能
div.onmouseover = function(){
//清除计时器
clearInterval(time);
}
//设置鼠标滑出图片运动
div.onmouseout = function(){
time = setInterval(move,2000);
}
//设置触摸小圆点改变图片事件
for(var j = 0 ; j < span.length ; j++){
//为小圆点设置索引
span[j].index = j ;
//鼠标划入小圆点
span[j].onmouseover = function(){
// console.log(this);
clearInterval(time);
for(var i = 0 ;i < span.length ; i++){
if(this == span[i]){
span[i].style.backgroundColor = "red"
flag = this.index ;
img.src = imgs[this.index];
}else{
span[i].style.backgroundColor = "";
}
}
}
//设置鼠标滑出小圆点开始计时器
span[j].onmouseout = function(){
time = setInterval(move,2000);
}
}
function chang(a){
clearInterval(time);
if(a == 0){
num = 1 ;
}
if(a == 1){
num = -1 ;
}
move();
}
function change(){
num = 1 ;
time = setInterval(move,2000);
}
</script>
</body>
</html>
评论0