前端轮播图

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="css/banner.css"/>
  </head>
  <body>
  <ul>
  <li style="margin-left: 0;" class="cli">李白</li>
  <li class="cli">韩信</li>
  <li class="cli">西施</li>
  </ul>
   
  <div class="main">
  <img src="img/李白.jpg" class="img" onmouseover="fun1()" onmouseout="fun2()">
  </div>
  </body>
  </html>
  <script src="js/1.js"></script>
  <script>
  //全局变量
  var arr = [
  'img/李白.jpg',
  'img/韩信.jpg',
  'img/西施.jpg'
  ];
   
  //每隔一段时间运行一次
  var banner = setInterval(function(){
  //当前的位置
  var path = $('.img').attr('src');
  var key = 0;
  //根据当前的位置去找下一张图片的位置
  $(arr).each(function(k,v){
  if(v==path){
  key = k
  }
  })
   
  var last_key = key+1>arr.length-1 ? 0 : key+1;
  //替换属性
  $('.img').attr('src',arr[last_key])
  },1000);
   
   
   
  function fun1(){
  clearInterval(banner)
  }
   
  function fun2(){
  setInterval(function(){
  //当前的位置
  var path = $('.img').attr('src');
  var key = 0;
  //根据当前的位置去找下一张图片的位置
  $(arr).each(function(k,v){
  if(v==path){
  key = k
  }
  })
   
  var last_key = key+1>arr.length-1 ? 0 : key+1;
  //替换属性
  $('.img').attr('src',arr[last_key])
  },1000);
  }
   
  $('.cli').click(function(){
  var content = $(this).text();
  var key = 0;
  $(arr).each(function(k,v){
  if(v.indexOf(content)>-1){
  key = k
  }
  })
   
  $('.img').attr('src',arr[key]);
   
  })
   
  </script>
posted @ 2021-06-15 19:32  王越666  阅读(46)  评论(0)    收藏  举报