轮播图特效

<!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>