js 实现图片自动轮换效果

时间:2022-08-25 11:44:32

效果图大致如下:

js 实现图片自动轮换效果

代码如下:

<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  *{
  margin: 0;
  padding: 0;
  }
  #box{
  width: 592px;
  height: 400px;
  margin: 30px auto;
  border: 5px #eee solid;
  position: relative;
  overflow: hidden;
  }
  img{
  width: 600px;
  height: 400px;
  border: none;
  margin: 0;
  padding: 0;
  margin-left: -8px;
  }
  #img{
  width: 3600px;
  position: absolute;
  border: none;
  left: 0;
  }
  h1{
  font-size: 22px;
  line-height:25px;
  margin-top: 10px;
  margin-left: 5px;
   
  }
  p{
  font-size: 13px;
  line-height: 20px;
  margin: 8px;
   
  }
  #title{
  position: absolute;
  top: 400px;
  left: 0;
  font-size: 12px;
  width: 599px;
  height: 180px;
  margin-left: 0px;
  }
  #title div{
  position: absolute;
  left: 0;
  top: 0;
  width: 600px;
  height: 180px;
  background: #000;
  opacity: 0.5;
  color: #fff;
   
  }
  </style>
  <script type="text/javascript">
  function getStyle(obj,attr){
  return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
  }
  function run(obj,attr,step,frequency,target,endFn){
  clearInterval(obj.timer);
  step=parseInt(getStyle(obj,attr))<target?step:-step;
  obj.timer=setInterval(function(){
  var displace=parseInt(getStyle(obj,attr))+step;//位移
  if(step>0 && displace>target||step<0 && displace<target){
  displace=target;
  }
  obj.style[attr]=displace+'px';
  if(displace==target){
  clearInterval(obj.timer);
  endFn && endFn();
  }
  },frequency);
  }
  window.onload=function(){
  var oImg=document.getElementById('img');
  aImg=oImg.getElementsByTagName('img');
  num=0;
  var timer=null;
  var oTitle=document.getElementById('title');
  var aDiv=oTitle.getElementsByTagName('div');
  //文字部分向上浮动
  run(aDiv[0],'top',20,50,-100,function(){
  setTimeout(function(){
  run(aDiv[num],'top',20,50,0);
  },1500)
  })
   
  timer=setInterval(function(){
  var target=-600*(num+1);
  //图片移动
  run(oImg,'left',20,20,target,function(){
  run(aDiv[num],'top',20,50,-100,function(){
  setTimeout(function(){
  run(aDiv[num],'top',20,50,0);
  if(num==aImg.length-1){
  oImg.style.left=0;
  num=0;
  }
  },1500)
  })
  })
  num++;
  },3000)
   
  };
   
  </script>
  </head>
  <body>
  <div id="box">
  <div id="img">
  <img src="img/i1.jpg" alt="">
  <img src="img/i2.jpg" alt="">
  <img src="img/4.jpg" alt="">
  <img src="img/6.jpg" alt="">
  <img src="img/9.jpg" alt="">
  <img src="img/3.jpg" alt="">
  </div>
  <div id="title">
  <div>
  <h1>离婚律师:第1集</h1>
  <p>1:擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东(吴秀波 饰)算阴沟里翻船了,老婆公然给他戴了绿帽子,更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
  </div>
  <div>
  <h1>离婚律师:第2集</h1>
  <p>2:擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东(吴秀波 饰)算阴沟里翻船了,老婆公然给他戴了绿帽子,更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
  </div>
  <div>
  <h1>离婚律师:第3集</h1>
  <p>3:擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东(吴秀波 饰)算阴沟里翻船了,老婆公然给他戴了绿帽子,更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
  </div>
  <div>
  <h1>离婚律师:第4集</h1>
  <p>4:擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东(吴秀波 饰)算阴沟里翻船了,老婆公然给他戴了绿帽子,更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
  </div>
  <div>
  <h1>离婚律师:第5集</h1>
  <p>5:擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东(吴秀波 饰)算阴沟里翻船了,老婆公然给他戴了绿帽子,更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
  </div>
  <div>
  <h1>离婚律师:第6集</h1>
  <p>6:擅长离婚诉讼、一向在法庭上慷慨激昂口若悬河的著名律师池海东(吴秀波 饰)算阴沟里翻船了,老婆公然给他戴了绿帽子,更倒霉的是作为受害者的他竟然输掉了和老婆的离婚官司。</p>
  </div>
  </div>
  </div>
  </body>
  </html>