<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0px;padding:0px;}
#left{position:fixed;left:60px;top:120px;30px;height:30px;}
#right{position:fixed;left:370px;top:120px;30px;height:30px;}
.div1{30px;height:30px;position:fixed;left:100px;top:250px;background:yellow;border-radius:30px;text-align:center;line-height:30px;}
</style>
</head>
<body>
<div id="left" οnclick="func('-')"><img src="./images/left.png" alt="" width="100%"></div>
<img src="./images/11.jpg" alt="" name="list" style="display:block" width="600">
<img src="./images/22.jpg" alt="" name="list" style="display:none" >
<img src="./images/33.jpg" alt="" name="list" style="display:none" >
<img src="./images/44.jpg" alt="" name="list" style="display:none" >
<img src="./images/55.jpg" alt="" name="list" style="display:none" >
<div id="right" οnclick="func('+')"><img src="./images/right.png" alt="" width="100%"></div>
<div class="div1" name="list1" οnmοuseοver="demo(0)" οnmοuseοut="demo1(0)"></div>
<div class="div1" name="list1" οnmοuseοver="demo(1)" οnmοuseοut="demo1(1)"></div>
<div class="div1" name="list1" οnmοuseοver="demo(2)" οnmοuseοut="demo1(2)"></div>
<div class="div1" name="list1" οnmοuseοver="demo(3)" οnmοuseοut="demo1(3)"></div>
<div class="div1" name="list1" οnmοuseοver="demo(4)" οnmοuseοut="demo1(4)"></div>
</body>
<script>
//获取对象的方式
var lists = document.getElementsByName('list');
var list1 = document.getElementsByName('list1');
//console.log(list1);
//console.log(lists);
var m=0;
var timmer;
var x = 100;
//使用循环方式将数字写出来
for(var i =0;i<list1.length;i++){
//让你每个数字按钮的间隔变为50像素
list1[i].style.left=x+'px';
list1[i].innerHTML = i+1;
x+=50;
}
//鼠标移入
function demo(a){
//alert(a);
//清空定时器
clearInterval(timmer);
for(var i = 0;i<list1.length;i++){
if(a == i){
//把图片a 显示出来
lists[a].style.display="block";
//让选中的数字按钮变为蓝色背景
list1[i].style.background="blue";
}else{
//把其他图片变为隐藏
lists[i].style.display="none";
//将其他没有被选中的按钮变为黄色
list1[i].style.background="yellow";
}
}
}
//鼠标移除事件
function demo1(b){
//alert(b);
//将移除的图片序列放置到m中
m=--b;
//运行图片进行运动
running();
//恢复定时器
timmer=setInterval(running,2000);
}
//显示某个图片
function show(m){
//alert(m);
for(var i =0;i<lists.length;i++){
if(i == m){
//显示图片
lists[i].style.display="block";
//让你的对应的按钮也开始改变颜色
list1[i].style.background="blue";
}else{
//隐藏图片
lists[i].style.display="none";
//让你的数字按钮也随着没有被选中的变为黄色
list1[i].style.background="yellow";
}
}
}
//show(0);
//让图片动起来
function running(){
//console.log(m);
//alert(m);
m++
if(m>=lists.length){
m=0;
}
show(m);
}
//让图片轮播左右按钮
function func(b){
//alert(b);
//清空定时器让轮播停止
clearInterval(timmer);
switch(b){
case '-':
m=m-2;
if(m<-1){
m=3
}
break;
case '+':
break;
}
running();
//调用定时器
timmer=setInterval(running,3000);
}
//调用定时器进行轮播
timmer=setInterval(running,1000);
</script>
</html>